javascript - 自定义元素设置 : constructor vs connectedCallback

Question

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

我想这里的主要问题是我是否缺少其他一些理由来选择一种方法而不是另一种方法。

谢谢。

Answer 1

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

创建 影根 ;

创建和附加 元素 *;

将事件监听器附加到这些元素(范围为您自己的 ShadowDOM)；

创建 attributes * (这可能仍然是一个坏主意，因为在动态创建情况下这可能会出乎意料)。

你不能在构造函数中做什么
在 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 ，在其他部分，它们偏离了规范中的建议。
具体 我不同意以下 (鉴于听众的范围在组件之外)，出于我上面给出的原因。

In general, the constructor should be used to set up initial state and default values, and to set up event listeners and possibly a shadow root.