我有一个自定义元素<my-el>
,在结构上与此类似(纯静态,服务器渲染的HTML):
<my-el>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</my-el>
Since Chrome does not guarantee child element availability in the connectedCallback
of custom elements,我使用的是HTMLParsedElement
,它使用以下步骤基本上延迟了自定义元素的初始化:
nextSibling
(在这种情况下,解析器可能已通过my-el
),或者是否已达到DOMContentLoaded
(又名{{ 1}})。document.readyState !== 'loading'
上设置MutationObserver
,以重新检查上述条件。概述的策略当前仍然存在的问题是,childList
可能在HTML可用时被触发:
MutationObserver
甚至是这个
<my-el>
<div>a</div>
<div>b</div>
</my-el>
在这些情况下,MutationObserver会被触发多次,并且处理程序无法知道何时实际到达<my-el>
<div>a</div>
</my-el>
的末尾。
问题:有人知道包装所有内部</my-el>
元素是否可以解决此问题:
div
或者换句话说,当突变观察者触发该结构时,我可以可靠地假定包装子div包括其所有后代节点都是完全可用的吗?