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

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

Thanks.

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

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

In the constructor，这是安全的

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

在构造函数中不能做什么

In the constructor， 你是不允许（除其他外）

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

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

在这方面什么是不明智的constructor

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

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

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