自定义元素设置：构造函数与 connectedCallback
custom element setup: constructor vs connectedCallback
我是 Web 组件的新手，我注意到一些示例在自定义元素的构造函数中设置 dom，而其他示例在 connectedCallback 中设置。
由于两者似乎都工作正常（尽管我只尝试了 Chrome），我认为主要区别在于用户在 js 中创建元素而不是将其附加到页面的情况？
我想这里的主要问题是我是否缺少一些其他原因来选择一种方法而不是另一种方法。
谢谢。
自定义元素构造函数的最佳实践和规则
在构造函数中做什么是安全的
在constructor中，
是安全的
- 创建 影子根;
- 创建并附加 元素 *;
- 将事件侦听器附加到这些元素（范围为您自己的 ShadowDOM）；
- create attributes *（这可能仍然是一个坏主意，因为在动态创建的情况下这可能会出乎意料）。
在构造函数中不能做什么
在 constructor 中，您不允许（除其他外）
- 读取您事先未创建的任何属性...
- 访问子元素...
...因为在非升级情况下这些可能不存在，并且当您使用 document.createElement('my-custom-element') 或 new MyCustomElement 动态创建自定义元素时肯定不会存在。
constructor
中不明智的做法
在 constructor 中，您可能不想
- 将事件侦听器附加到组件影子 DOM 之外的 元素（例如
document、window），因为这些是您应该在组件的 disconnectedCallback 中清理的监听器类型（当您的组件在 DOM 中移动时将被调用）。
在构造函数中附加这些侦听器并在 disconnectedCallback 中正确清理它们会导致一旦您的组件从 DOM 中删除（并稍后重新添加）或移动时缺少侦听器。
*陷阱和注意事项
您需要了解自定义元素的生命周期，以免陷入其他明显的陷阱，其中包括：
- 如果您在
constructor 中添加属性并将这些属性包含在组件的 observedAttributes 中，请记住这将立即触发这些属性的 attributeChangedCallback，即使您的元素不是尚未连接（a.k.a。 在 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.
我是 Web 组件的新手，我注意到一些示例在自定义元素的构造函数中设置 dom，而其他示例在 connectedCallback 中设置。 由于两者似乎都工作正常（尽管我只尝试了 Chrome），我认为主要区别在于用户在 js 中创建元素而不是将其附加到页面的情况？
我想这里的主要问题是我是否缺少一些其他原因来选择一种方法而不是另一种方法。
谢谢。
自定义元素构造函数的最佳实践和规则
在构造函数中做什么是安全的
在constructor中，
- 创建 影子根;
- 创建并附加 元素 *;
- 将事件侦听器附加到这些元素（范围为您自己的 ShadowDOM）；
- create attributes *（这可能仍然是一个坏主意，因为在动态创建的情况下这可能会出乎意料）。
在构造函数中不能做什么
在 constructor 中，您不允许（除其他外）
- 读取您事先未创建的任何属性...
- 访问子元素...
...因为在非升级情况下这些可能不存在，并且当您使用 document.createElement('my-custom-element') 或 new MyCustomElement 动态创建自定义元素时肯定不会存在。
constructor
中不明智的做法
在 constructor 中，您可能不想
- 将事件侦听器附加到组件影子 DOM 之外的 元素（例如
document、window），因为这些是您应该在组件的disconnectedCallback中清理的监听器类型（当您的组件在 DOM 中移动时将被调用）。
在构造函数中附加这些侦听器并在 disconnectedCallback 中正确清理它们会导致一旦您的组件从 DOM 中删除（并稍后重新添加）或移动时缺少侦听器。
*陷阱和注意事项
您需要了解自定义元素的生命周期，以免陷入其他明显的陷阱，其中包括：
- 如果您在
constructor中添加属性并将这些属性包含在组件的observedAttributes中，请记住这将立即触发这些属性的attributeChangedCallback，即使您的元素不是尚未连接（a.k.a。 在 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.