Custom html tags on page render skip HTML parsing for some reason

允我心安 提交于 2019-12-04 04:29:54

问题


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

Here's an example

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


回答1:


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

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.

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

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>


来源:https://stackoverflow.com/questions/40378115/custom-html-tags-on-page-render-skip-html-parsing-for-some-reason

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!