Web Components & Shadow DOM

How do you attach a Shadow DOM to a custom element?

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        /* Component styles */
      </style>
      <div>Component content</div>
    `;
  }
}

Using createElement with a shadow flag
By setting the shadow attribute
Using attachShadow with mode option
Shadow DOM is attached using the attachShadow() method with a configuration object specifying the mode ('open' or 'closed'). The mode: 1) 'open' allows access to the shadow root from JavaScript outside the component, 2) 'closed' restricts access to the internal shadow root, 3) Returns a ShadowRoot object that you can use to add content and styles, 4) Creates an encapsulated DOM tree that's isolated from the main document.
Through the createShadowRoot API

Next Question (4/20)