由于某种原因，页面上的自定义HTML标记会跳过HTML解析 [英] Custom html tags on page render skip HTML parsing for some reason

问题描述

我不知道，为什么会发生这种情况，但是看起来像自定义html标记不能在页面加载时正确解析它的内容，如果真的有很多这样的元素的话。

I don't know, why it's happening, but looks like custom html tags cannot parse it's content properly on page load if there's really a lot of such elements.

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 
      } 
    }})
  }
);

这里是一个例子

我的假设是有某种堆栈，有时这堆栈只是溢出而已:)

My hypothesis is that there's some kind of stack, and sometimes this stack just overflows :)

你对如何解决它有什么想法吗？
（我已经在反应光纤的底层了..从那里得到调度）。

Do you have any ideas on how to fix it? (I'm already looking under the hood of react fiber.. to get the scheduling from there).

推荐答案

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

It's because the elements are added to the DOM tree as they are parsed.

这里的文档非常大，所以元素不会一次性添加，而会分成几个块。有时候只有1或2个元素被添加（在块的末尾），然后自定义元素被创建并附加一个只有一个确定的子节点。

Here the document is very large, so elements are not added in a single pass but in several chunks. Sometimes only 1 or 2 elements are added (at the end of the chunk) and then the Custom Element is created and attached whith a piece of its definitive child nodes only.

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

To fix it, you can define the custom element only after all the document is parsed. Put the <script> after the <x-tag>s, or use the onload event.

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

---

否则，如果由于某些原因自定义元素已经定义，请将众多标签放在< template> 元素中，然后在一次操作中插入内容：

---

Else if for some reasons the Custom Element is already defined, put the numerous tags in a <template> element, then insert its content in a single operation:

<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>

这篇关于由于某种原因，页面上的自定义HTML标记会跳过HTML解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！