未呈现自定义元素内的子内容

问题描述：

“子内容”跨度显示在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>

附：这是在Chrome 57.0.2987.133

我认为元素被渲染，但不可见。 –

答

事实证明，createShadowRoot已被弃用。它似乎做我想要的，并显示没有错误，但不支持插槽（或显然显示子元素）。

交换createShadowRoot()为attachShadow({mode: 'open'})解决了这个问题。

未呈现自定义元素内的子内容

相关推荐