2017-04-05 12 views
1

'子コンテンツ'スパンは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> 

Screenshot of DOM tree and page with child not visible

P.S.これはChromeで57.0.2987.133

+0

要素はレンダリングされていますが、表示されていないと思います。 –

答えて

1

createShadowRootは非推奨となりました。それは私が望むことをしているように見えますが、エラーは表示されませんが、スロッティング(または明らかに子要素を表示)はサポートされていません。

スワッピングcreateShadowRoot()attachShadow({mode: 'open'})に解決しました。

関連する問題