페이지의 사용자 정의 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 트리에 추가되기 때문입니다.

문서가 매우 크기 때문에 요소는 단일 패스가 아닌 여러 청크에 추가됩니다. 때로는 하나 또는 두 개의 요소 만 (청크 끝에) 추가 된 다음 사용자 정의 요소가 생성되어 해당 최종 하위 노드에만 첨부됩니다.

수정하려면 모든 문서가 구문 분석 된 후에 만 ​​사용자 지정 요소를 정의하면됩니다. <x-tag>s 뒤에 <script>을 넣거나 onload 이벤트를 사용하십시오. 그렇지

---

사용자 정의 요소가 이미 정의되어 몇 가지 이유를 들어, <template> 요소에 다수의 태그를 넣어 경우, 다음 삽입

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

는 한 번의 작업으로 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>