我是Web组件的新手，我注意到一些示例在定制元素的构造函数中设置DOM，而另一些示例则在ConnectedCallback中设置。 由于两者似乎都工作得很好(尽管我只尝试了Chrome)，我认为主要的区别是用户在js中创建元素而不是将其附加到页面的情况？

我想这里的主要问题是我是否错过了一些其他原因而不是更喜欢一种方法。

谢谢。

---

解决方案

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

在构造函数中执行哪些操作是安全的

在constructor中，

• 创建影子根；
• 创建并追加元素*；
• 将事件侦听器附加到这些元素(作用域为您自己的ShadowDOM)；
• 创建属性*。

在构造函数中不能做的事情

在constructor中，不允许(除其他事项外)

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

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

在constructor

中做什么是不明智的

在constructor中，您可能不想

• 将事件侦听器附加到组件影子DOM之外的元素(例如document、window)，因为这些侦听器是您应该在组件的disconnectedCallback(例如，当您的组件在DOM中移动时调用)中清理的那种侦听器。

在构造函数中附加这些侦听器并在disconnectedCallback中正确清理它们会导致组件从DOM中移除(稍后重新添加)或在DOM中移动时丢失侦听器。

*陷阱和注意事项

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

• 如果您在constructor中添加属性，并且已将这些属性包括在组件的observedAttributes中，请记住，这将立即触发这些属性的attributeChangedCallback，即使您的元素尚未连接(也称为。在DOM)。
• 如果您创建其他自定义元素并将其附加到组件的影子DOM中，请记住这将触发这些组件connectedCallback。

部分地，这些最佳实践和规则遵循https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance，在其他部分，它们偏离了规范中的建议。

具体地说，我不同意以下(鉴于监听程序的作用域在组件之外)，原因是我上面给出的原因。

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