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

我不熟悉web组件，我注意到一些示例在自定义元素的构造函数中设置dom，而其他示例在connectedCallback中设置dom。 虽然我只尝试了Chrome浏览器，但这两种浏览器看起来都很好，我认为主要的区别在于用户在js中创建元素，而不是将其附加到页面上

我想这里的主要问题是，我是否错过了选择一种方法而不是另一种方法的其他原因

谢谢。

自定义元素构造函数的最佳实践和规则 在构造函数中做什么是安全的 在

构造函数中

，可以安全地

• 创建阴影根
• 创建并附加元素*
• 将事件侦听器附加到这些元素（范围限定到您自己的ShadowDOM）
• 创建属性*

在构造函数中不能执行的操作 在

构造函数中

，您被禁止（除其他事项外）

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

…因为在非升级情况下，这些元素可能不存在，并且当您使用

document.createElement（'my-custom-element'）

或

new MyCustomElement

动态创建自定义元素时，这些元素肯定不存在

在

构造函数中做什么是不明智的
在
构造函数中，您可能不想


将事件侦听器附加到组件的影子DOM之外的元素（例如
文档
，
窗口
），因为这些侦听器是您应该在组件的
断开连接回调
中清理的侦听器（例如，在DOM中移动组件时将调用这些侦听器）

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

*陷阱和需要注意的事情
您需要了解自定义元素生命周期，以免落入其他明显的陷阱，包括：


如果在
构造函数中添加属性
，并将这些属性包含在组件的
观察属性中
，请记住，这将立即触发这些属性的
属性更改回调
，即使元素尚未连接（即DOM中的a.k.a.）
如果创建其他自定义元素并将其附加到组件的影子DOM中，请记住这将触发这些组件的
connectedCallback

在某种程度上，这些最佳实践和规则是遵循的，在其他方面，它们偏离了规范中的建议

具体地说，基于上述原因，我不同意以下内容（鉴于侦听器的作用域在组件之外）

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

您能给出这两种情况的示例吗？所有（回调）方法的有用图表：