页面上的自定义html标记出于某种原因呈现跳过HTML解析

Question

我不知道为什么会发生这种情况，但是如果真的有很多这样的元素，自定义html标记就无法在页面加载中正确地解析它的内容。

document.registerElement('x-tag', 
  {
    prototype: Object.create(HTMLElement.prototype, {
      attachedCallback: { value: function() {
        console.log(this.innerHTML, this.childNodes); // wrong innerHTML and childNodes once in n-occurrences 
      } 
    }})
  }
);

这是一个例子

我的假设是，有某种堆栈，有时这个堆栈就会溢出:)

你对如何解决这个问题有什么想法吗？(我已经在寻找反应纤维的罩下了..。从那里得到日程安排)。

Answer 1

这是因为元素在解析时被添加到DOM树中。

这里的文档非常大，因此元素不是在一次传递中添加的，而是以几个块的形式添加的。有时只添加一个或两个元素(在块的末尾)，然后创建定制元素并将其附加到其唯一的子节点中。

要修复它，只能在分析完所有文档之后才能定义自定义元素。将<script>放在<x-tag>s之后，或者使用onload事件。

document.onload = function ()
{
    document.registerElement('x-tag', { prototype: proto } )
}

否则，如果由于某些原因已经定义了自定义元素，则将众多标记放在<template>元素中，然后在单个操作中插入其content：

<template id=tpl>
  <x-tag></x-tag><x-tag></x-tag><x-tag></x-tag><x-tag></x-tag><x-tag></x-tag><x-tag></x-tag><x-tag></x-tag><x-tag></x-tag><x-tag></x-tag>...
</template> 
<script>
    target.appendChild( document.importNode( tpl.content, true )
</script>