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

Question

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

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

谢谢。

Answer 1

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

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

在

constructor

，是安全的

• 创建影子根；
• 创建并追加元素 *;
• 将事件侦听器附加到这些元素（范围为您自己的 ShadowDOM）；
• create 属性 *（这可能仍然是一个坏主意，因为在动态创建情况下这可能会出现意外）。

在构造函数中不能做什么

在

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，在其他部分，它们偏离了规范中所做的建议.

具体来说，

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

一般来说，构造函数应该用于设置初始状态和默认值，并设置事件监听器以及可能的影子根。