'Document'에 'createElement'를 실행하지 못했습니다. 결과에 자식이 없어야합니다.

Question

polyfill을 통해 한동안 맞춤 요소 v1을 사용해 왔습니다.

예외 : DOMException : 크롬 54 (기본 V1 구현과 함께 첫 번째 버전) 내 요소를 초기화 할 때 오류를 던지기 시작 '문서'에 '의 createElement'을 실행하지 못했습니다 : 결과는 어린이

에게이 없어야합니다

기분을 상하게하는 라인은 간단하다 :

let el = document.createElement('my-custom-element'); 

Answer 1

크롬의 기본 구현은 polyfill이 아니었다 규격의 요구 사항을 적용 할 것으로 보인다. 이것이의 createElement 또는에는 createElementNS 방법을 사용하여 소비자의 기대에 위반과 같은 요소가 어떤 속성이나 자식을 얻을 안

: 사양의 "Requirements for custom element constructors"섹션에 따르면.

생성하려고 시도한 요소가 생성자에서 자체적으로 자식을 추가했습니다.

일반적으로

작업이 가능 특히 가져 오는 자원이나 렌더링을 포함하는 작업만큼 connectedCallback로 연기해야합니다

솔루션

은 사양의 권장 사항을 준수하는 것이 었습니다. 그러나 connectedCallback은 두 번 이상 호출 될 수 있으므로 진정한 일회성 초기화 작업에는 두 번 실행되지 않도록 가드가 필요합니다.

즉 연결된 콜백에 자식을 추가하고 플래그를 사용하여 첫 번째 연결에서만 요소가 초기화되도록합니다.