对于那些了解自定义元素而不看到具体代码示例的人来说，这是一个概念性问题。 我正在创建一个自定义元素，该元素的显示取决于其文本以下。在自定义

Question

为了在自定义元素的构造过程中获取

textContent，我将我的构造函数代码封闭在SettieMout中，然后能够使我的自定义元素构造建立在其基础上。 否，这感觉有些骇人听闻，我认为在元素的构造过程中有一种更合适的方法来获取文本结合。那时我发现生命周期回调

。

方法允许我看到文本以下，而无需将SettiMeT放入自定义元素的构造函数中。但是，这句话让我担心：

ConnectedCallback：。 。 。可能发生在元素的内容有 完全解析

这让我担心，如果我在自定义元素内部有很多内容，则可能仍然返回一个空字符串，因为所有这些文本可能还没有“完全解析”。

这担心是合理的吗？是否有更确定的方法来获得自定义元素构造的基础？或者，我应该采用将SettieMout放入自定义元素构造函数中的初始解决方案吗？
    

请参阅4年后的博客文章：

https：//dev.to/dannyengelman/web-component-developers-do-not-connect-with-the-connectedcallback-yet-Yet-4Jo7

回答

在您的示例中

textContent

是domcontent

connectedCallback

不应（尝试）访问dom，

因为它可以从根本没有DOM时从

Answer 1

运行。 （或在服务器端渲染方案中）

this.textContent

在整个DOM内部完成解析之前运行。如果要访问其DOM内容，则必须等待到元素DOM已准备就绪。

upup untill 2019仅在firefox中您cold cold访问元素dom content; 请参阅：ConnectedCallback中元素升级的等待：Firefox和Chromium差异

---

---

但是该错误已修复

为了详细的分析，请参见：Https：//jsfiddle.net/customelementsexamples/n20bwckt/

注意在Firefox和Chrome中运行时的区别。

SETTIMEOUT（FUNC，0）

是完全有效的（但最好不要在

textContent

中），并确保当事件行动为空时，代码运行，因此，当所有DOM都准备好访问时。您也可以使用

constructor

。 所有图书馆在引擎盖下都做类似的事情来添加
.createElement('your-element')

和喜欢。

使用
bare-bones

自定义元素API，您必须自己编写。

注：

现在触发运行

a（势）

connectedCallback的代码，因此请在代码中使用constructor
检查。 对于所有回调运行时的视觉图表，请参见：
https：//andyogo.github.io/custom-element-reactions-diagram/

注：如果您不指定自己元素中的任何方法，则可以从htmlelement运行中指定方法。 因此，没有任何声明

requestAnimationFrame或updateComplete
的元素是完全有效的。 在

中，我只使用

connectedCallback