自定义元素设置：构造函数与 connectedCallback

Question

我是 Web 组件的新手，我注意到一些示例在自定义元素的构造函数中设置了 dom，而其他示例则在 connectedCallback 中进行设置。由于两者似乎都可以正常工作（尽管我只尝试了 Chrome），我认为主要区别在于用户在 js 中创建元素而不将其附加到页面的情况？

我想这里的主要问题是我是否遗漏了一些其他原因来偏爱一种方法而不是另一种方法。

谢谢。

Answer 1

自定义元素构造函数的最佳实践和规则

在构造函数中做什么是安全的

在 constructor , 是安全的

• 创建影子根；
• 创建和附加元素*;
• 将事件侦听器附加到这些元素（范围为您自己的 ShadowDOM）；
• 创建属性 *.

你不能在构造函数中做什么

在 constructor ，你不被允许（除其他外）

• 读取您事先未创建的任何属性...
• 访问子元素...

...因为这些在非升级情况下可能不存在，并且在您使用document.createElement('my-custom-element')或动态创建自定义元素时肯定不会存在new MyCustomElement。

什么是不明智的 constructor

在 中 constructor ，您可能不想

• 将事件侦听器附加到组件 shadow DOM 之外的元素（例如document, window），因为这些是您应该在组件中清理的侦听器类型（例如，disconnectedCallback当您的组件在 DOM 中移动时将被调用）。

将这些侦听器附加到构造函数中并正确清理它们，disconnectedCallback一旦您的组件从 DOM 中移除（然后重新添加）或移动到 DOM中，就会导致丢失侦听器。

*陷阱和注意事项

您需要了解自定义元素生命周期，以免陷入其他明显的陷阱，其中包括：

• 如果您在 中添加属性 constructor 并在组件的 中包含这些属性observedAttributes，请记住这将立即触发attributeChangedCallback这些属性的 ，即使您的元素尚未连接（即在 DOM 中）。
• 如果您创建其他自定义元素并将其附加到组件的 shadow DOM 中，请记住这将触发这些组件的connectedCallback.

在某种程度上，这些最佳实践和规则遵循https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance，在其他部分，它们与规范中的建议有所不同。

具体来说，由于我上面给出的原因，我不同意以下内容（鉴于侦听器的范围在组件之外）。

通常，构造函数应该用于设置初始状态和默认值，以及设置事件侦听器和可能的影子根。