사용자 정의 요소 내의 하위 내용이 렌더링되지 않습니다.

'하위 내용'범위는 Light DOM에 표시되지만 실제로 페이지에 렌더링되지 않습니다 (스크린 샷 참조).사용자 정의 요소 내의 하위 내용이 렌더링되지 않습니다.

누구나 왜 보이지 않는지 알 수 있습니까? 또한 분명히 슬롯을 뚫지도 않았 음을 알았습니다. 슬롯이 보이게하려는 시도였습니다.

<!doctype html> 
<html> 
    <body> 
    <hello-world> 
     <span>Child content</span> 
    </hello-world> 
    <script> 
     var template = ` 
      <span>Hello world</span> 
      <slot></slot> 
     `; 
     var MyElementProto = Object.create(HTMLElement.prototype); 
     // Fires when an instance of the element is created 
     MyElementProto.createdCallback = function() { 
      var shadowRoot = this.createShadowRoot(); 
      shadowRoot.innerHTML = template; 
     }; 
     document.registerElement('hello-world', { prototype: MyElementProto }); 
    </script> 
    </body> 
</html>

P.S. Chrome에 있음 57.0.2987.133

출처

2017-04-05 owencm

요소가 렌더링되었지만 보이지 않는다고 생각합니다. –

createShadowRoot은 (는) 사용되지 않습니다. 그것은 내가 원하는 것을 수행하고 오류를 보이지는 않지만 슬롯을 뚫는 것을 지원하지 않습니다 (또는 분명히 자식 요소를 보여줍니다).

attachShadow({mode: 'open'})에 대해 createShadowRoot()을 교체하면 문제가 해결됩니다.

출처

2017-04-05 19:28:00 owencm

사용자 정의 요소 내의 하위 내용이 렌더링되지 않습니다.

답변

관련 문제