自定义元素构建期间获得this.textContent
Obtain this.textContent during Custom Element Construction
对于那些没有看到具体代码示例就理解 custom elements 的人来说，这是一个概念性问题。
我正在创建一个自定义元素，该元素的显示取决于其文本内容。在自定义元素的构造函数中，如果我尝试访问 this.textContent，它 return 是一个空字符串，即使该自定义元素的 html 确实包含文本。
为了在自定义元素的构造过程中获得 textContent，我将我的构造函数代码包含在一个 setTimeout 中，然后能够使我的自定义元素构造基于它的 textContent。
但是，这感觉有点老套，我认为在元素的构造过程中有更合适的方法来获取 textContent。那是我发现 Using the life Cycle Callbacks.
的时候
connectedCallback 方法使我无需将 setTimeout 放入自定义元素的构造函数中即可查看 textContent。但是，这句话与我有关：
connectedCallback: . . . may happen before the element's contents have
been fully parsed.
这让我担心，如果我在自定义元素中有很多内容，this.textContent 可能仍然是 return 空字符串，因为所有文本可能尚未“完全解析”。
这种担心有道理吗？有没有更可靠的方法来获取 this.textContent 作为自定义元素构造的基础？或者，我应该采用我最初的解决方案，将 setTimeout 放入自定义元素的构造函数中吗？
在你的例子中 textContent 是 DOM 内容
constructor 不应（尝试）访问 DOM、
因为当根本没有 DOM 时，它可以是 .createElement('your-element') 中的 运行。
（或在 Server-Side-Rendering 场景中）
connectedCallback 运行s 整个 DOM 里面解析完毕。如果您想访问其 DOM 内容，您必须等到元素 DOM 准备就绪。
只有在 FireFox 中您可以 访问元素 DOM 内容；
参见：
详细分析见：https://jsfiddle.net/CustomElementsExamples/n20bwckt/
注意 FireFox 中 运行 和 Chrome.
的区别
setTimeout( func , 0 )
是完全有效的（但最好不要在 constructor 中）并且当 EventLoop 为空时确保您的代码 运行s，因此当所有 DOM 准备好被访问时。您也可以使用 requestAnimationFrame.
所有图书馆都在幕后做一些类似的事情来添加 updateComplete 和类似的东西。
使用 bare-bones 自定义元素 API 您必须自己编写。
注意： connectedCallback 现在触发代码 运行s after a (potential) disconnectedCallback，因此请在您的代码中使用 this.isConnected 检查它。
所有回调时的可视化图表运行见：
https://andyogo.github.io/custom-element-reactions-diagram/
注意：如果您没有在自己的元素中指定任何方法，则HTMLElement 运行.
中的方法
因此，没有声明任何 constructor 或 connectedCallback 的元素是完全有效的。
在 IconMeister 我只用 attributeChangedCallback
对于那些没有看到具体代码示例就理解 custom elements 的人来说，这是一个概念性问题。
我正在创建一个自定义元素，该元素的显示取决于其文本内容。在自定义元素的构造函数中，如果我尝试访问 this.textContent，它 return 是一个空字符串，即使该自定义元素的 html 确实包含文本。
为了在自定义元素的构造过程中获得 textContent，我将我的构造函数代码包含在一个 setTimeout 中，然后能够使我的自定义元素构造基于它的 textContent。
但是，这感觉有点老套，我认为在元素的构造过程中有更合适的方法来获取 textContent。那是我发现 Using the life Cycle Callbacks.
的时候connectedCallback 方法使我无需将 setTimeout 放入自定义元素的构造函数中即可查看 textContent。但是，这句话与我有关：
connectedCallback: . . . may happen before the element's contents have been fully parsed.
这让我担心，如果我在自定义元素中有很多内容，this.textContent 可能仍然是 return 空字符串，因为所有文本可能尚未“完全解析”。
这种担心有道理吗？有没有更可靠的方法来获取 this.textContent 作为自定义元素构造的基础？或者，我应该采用我最初的解决方案，将 setTimeout 放入自定义元素的构造函数中吗？
在你的例子中 textContent 是 DOM 内容
constructor 不应（尝试）访问 DOM、
因为当根本没有 DOM 时，它可以是 .createElement('your-element') 中的 运行。
（或在 Server-Side-Rendering 场景中）
connectedCallback 运行s 整个 DOM 里面解析完毕。如果您想访问其 DOM 内容，您必须等到元素 DOM 准备就绪。
只有在 FireFox 中您可以 访问元素 DOM 内容；
参见：
详细分析见：https://jsfiddle.net/CustomElementsExamples/n20bwckt/
注意 FireFox 中 运行 和 Chrome.
setTimeout( func , 0 )
是完全有效的（但最好不要在 constructor 中）并且当 EventLoop 为空时确保您的代码 运行s，因此当所有 DOM 准备好被访问时。您也可以使用 requestAnimationFrame.
所有图书馆都在幕后做一些类似的事情来添加 updateComplete 和类似的东西。
使用 bare-bones 自定义元素 API 您必须自己编写。
注意： connectedCallback 现在触发代码 运行s after a (potential) disconnectedCallback，因此请在您的代码中使用 this.isConnected 检查它。
所有回调时的可视化图表运行见：
https://andyogo.github.io/custom-element-reactions-diagram/
注意：如果您没有在自己的元素中指定任何方法，则HTMLElement 运行.
中的方法
因此，没有声明任何 constructor 或 connectedCallback 的元素是完全有效的。
在 IconMeister 我只用 attributeChangedCallback