Shadow dom 隐藏了 innerHTML

【问题标题】：Shadow dom hides innerHTMLShadow dom 隐藏了 innerHTML
【发布时间】：2018-12-19 11:07:53
【问题描述】：

当使用 shadow dom 创建自定义元素并设置元素的 innerHTML 时，它不会显示。为什么？有没有办法防止这种情况发生？

//JS代码

export default class VideoPlayer extends DomElement {
   constructor() {
      super();
      const mountPoint = document.createElement('div');
      this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
  }
}
window.customElements.define('video-player', VideoPlayer);

//HTML 代码

<video-player>Why is this text hidden?</video-player>

【问题讨论】：

标签： javascript innerhtml web-component shadow-dom custom-element

【解决方案1】：

为什么？这是 Shadow DOM 的主要功能之一：屏蔽/恢复名为 light DOM 的初始 DOM 以及名为 Shadow DOM 的新 DOM .

阅读更多关于 Google 的introduction to Shadow DOM。

为了防止这种情况发生：

如果不需要 Shadow DOM，请不要使用它们。您可以在没有 Shadow DOM 的情况下创建自定义元素。
使用<slot> 将所有light DOM 的一部分插入到Shadow DOM 中：

class VideoPlayer extends HTMLElement {
   constructor() {
      super();
      this.attachShadow({ mode: 'open' })
          .innerHTML = '<slot></slot>'
  }
}
window.customElements.define('video-player', VideoPlayer);

&lt;video-player&gt;Why is this text hidden?&lt;/video-player&gt;

【讨论】：