Shadow dom 隐藏了innerHTML

Question

创建带有 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>

Answer 1

为什么？这是 Shadow DOM 的主要功能之一：使用称为Shadow DOM的新 DOM来屏蔽/恢复称为Light DOM的初始DOM。

阅读有关 Google对 Shadow DOM的介绍的更多信息。

为了防止这种情况发生：

• 如果不需要，请不要使用 Shadow DOM。您可以在没有 Shadow DOM 的情况下创建自定义元素。

• 使用<slot>插入所有的光DOM到影子DOM的部分：

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

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