IlyaDoroshin IlyaDoroshin - 1 month ago 13
HTML Question

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

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

Answer

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

Because the document is very large, 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 cchunk) 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>