如何解决在自定义元素构建期间获取this.textContent setTimeoutfunc，0
对于那些了解custom elements却没有看到具体代码示例的人来说，这是一个概念性问题。
我正在创建一个自定义元素，其显示取决于其textContent。在自定义元素的构造函数中，如果我尝试访问this.textContent，则即使该自定义元素的html确实包含文本，它也会返回一个空字符串。
为了在自定义元素的构建过程中获得textContent，我将构造函数代码放在setTimeout中，然后能够使自定义元素的构建基于其textContent。
但是，这感觉有点棘手，我发现在元素的构造过程中有一种更合适的方法来获取textContent。那是我找到Using the life Cycle Callbacks的时候。
connectedCallback方法使我可以看到textContent，而无需将setTimeout放入自定义元素的构造函数中。但是，这句话使我担心：
connectedCallback：。 。 。可能在元素内容包含之前发生 已完全解析。
这让我担心，如果我在自定义元素中有很多内容，this.textContent可能仍会返回一个空字符串，因为所有这些文本可能尚未“完全解析”。
这种担心合理吗？有没有更确定的方法来获取this.textContent作为自定义元素构造的基础？或者，我应该采用将setTimeout放入自定义元素的构造函数中的最初解决方案吗？
解决方法
在您的示例中，textContent是DOM内容
constructor不应（尝试）访问DOM，
因为它完全没有DOM时就可以从.createElement('your-element')运行。
（或在服务器端呈现方案中）
connectedCallback在整个DOM内部解析之前运行。如果要访问其DOM内容，则必须等到元素DOM准备就绪。
只有在FireFox中，您可以访问Element DOM内容；
参见：wait for Element Upgrade in connectedCallback: FireFox and Chromium differences
有关详细分析，请参见：https://jsfiddle.net/CustomElementsExamples/n20bwckt/
请注意在FireFox和Chrome中运行时的区别。
setTimeout（func，0）
完全有效（但最好不要在constructor中使用），并确保您的代码在EventLoop为空（即准备好访问所有DOM）时运行。您也可以使用requestAnimationFrame。
所有库都在幕后添加了updateComplete之类的东西。
使用 bare-bones 自定义元素API，您必须自己编写。
注意：：connectedCallback现在触发在（可能）disconnectedCallback 之后运行的代码，因此请使用{{1}进行检查}。
有关所有回调都运行时的直观图，请参见：
https://andyogo.github.io/custom-element-reactions-diagram/
注意：如果您未在自己的Element中指定任何方法，则HTMLElement中的方法将运行。
因此，没有任何声明的this.isConnected或constructor的Elements是完全有效的。
在IconMeister中，我仅使用connectedCallback
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
