影子多姆隐藏innerHTML

Question

当创建带有影子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称为轻型DOM，并使用一个名为Shadow DOM的新DOM。

阅读更多关于谷歌的阴影DOM简介。

为了防止这种情况发生：

• 如果你不需要的话，不要使用阴影DOM。您可以创建自定义元素而不需要阴影DOM。
• 使用将所有轻型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>

​