在同一页面中多次使用相同的 LitElement

Question

使用LitElement创建了 web 组件。 我在同一页面中多次使用此组件。

我只想在我的组件第一次在页面上呈现时触发一个事件。

Answer 1

“第一次在页面上”是什么意思？

如果您希望在触发事件之前第一次在当前加载的页面集window.someProperty中呈现任何实例，然后在再次触发事件之前检查它。 当用户在页面之间导航时， window上的任何内容都会被清除，但如果您正在运行 SPA（Lit 特别适合），这可能暂时不会发生。

如果您想在第一次加载元素时执行某些操作，可以将标志添加到包含该元素的模块中。

如果您希望每个元素在最初呈现时触发一个事件，您可以使用firstUpdated 。

如果您希望文档中某处的第一个元素触发事件，那就更难了，因为 web 组件都是关于隔离功能的——它们不知道同一页面上的其他实例。 您最好的选择是：

• 添加一个父组件，该组件从所有子组件中获取事件，并且仅在第一次获得事件时才执行某些操作。
• 添加您为每个实例递增的索引属性，并且仅在为0时触发事件。