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

【问题标题】：Child content inside custom element not being rendered自定义元素内的子内容未呈现
【发布时间】：2017-04-05 19:22:08
【问题描述】：

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

【问题讨论】：

我认为该元素已渲染，但不可见。

标签： javascript shadow-dom custom-element

【解决方案1】：

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

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

【讨论】：