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的主要功能之一：使用新的 Shadow DOM mask / recover （初始DOM） light DOM

进一步了解Google的introduction to 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>

Shadow dom隐藏了innerHTML

1 个答案: