Shadow dom hides innerHTML

Question

when creating a custom element with shadow dom, and setting the element's innerHTML it isn't displayed. Why? and is there away to way to prevent this from happening?

//JS Code

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 CODE

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

Answer 1

Why? It's one of the main features of a Shadow DOM: to mask/recover the initial DOM called light DOM with a new DOM called the Shadow DOM.

Read more on Google's introduction to Shadow DOM.

To prevent this from happening:

• Don't use Shadow DOM if you don't need them. You can create Custom Elements without Shadow DOM.

• Use <slot> to insert parts of all of the light DOM into the Shadow 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>