Пользовательские теги 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 
     } 
    }}) 
    } 
); 

Вот an example

Моя гипотеза состоит в том, что есть какая-то стек, а иногда этот стек просто переливается :)

У вас есть какие-либо идеи о том, как это исправить? (Я уже смотрю под капотом реагирующего волокна .., чтобы получить оттуда график).

Answer 1

Это потому, что элементы добавляются в дерево DOM по мере их разбора.

Здесь документ очень большой, поэтому элементы не добавляются за один проход, а в несколько кусков. Иногда добавляется только 1 или 2 элемента (в конце фрагмента), а затем создается Пользовательский элемент и прикрепляется только частью его окончательных дочерних узлов.

Чтобы исправить это, вы можете определить пользовательский элемент только после того, как весь документ проанализирован. Поместите <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>