Shadow DOM

<my-ce></my-ce>

<script>
  class MyCe extends HTMLElement {
    constructor() {
      super()
      const shadow = this.attachShadow({ mode: 'open' })
      shadow.innerHTML = `<p>Hello, Shadow DOM!</p>`
      shadow.innerHTML += '<style>p { color: red; }</style>'
    }
  }
  customElements.define('my-ce', MyCe)
</script>

Attach shadow DOM

Instead of adding content directly to the element, create a shadow root using the attachShadow method.

Previous Next