Javascript 未呈现自定义元素中的子内容_Javascript_Shadow Dom_Custom Element

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

javascript

Javascript 未呈现自定义元素中的子内容,javascript,shadow-dom,custom-element,Javascript,Shadow Dom,Custom Element,“子内容”范围显示在Light DOM中，但实际上没有呈现到页面（请参见屏幕截图）有人知道为什么它不可见吗？我还注意到，它显然也没有被开槽，这是我试图使它可见 <!doctype html> <html> <body> <hello-world> <span>Child content</span> </hello-world> <script>

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


子内容
变量模板=`
你好，世界
`;
var MyElementProto=Object.create（HTMLElement.prototype）；
//在创建元素的实例时激发
MyElementProto.createdCallback=函数（）{
var shadowRoot=this.createShadowRoot（）；
shadowRoot.innerHTML=模板；
};
registerement（'hello-world'，{prototype:MyElementProto}）；

另一方面，这是在Chrome 57.0.2987.133中发现的

createShadowRoot

被弃用了。它似乎做了我想做的事情，并且没有显示错误，但不支持开槽（或者明显地显示子元素）

将

createShadowRoot（）

替换为

attachShadow（{mode:'open'}）

解决了问题。

我认为元素已呈现，但不可见。