<example-component></example-component>
<button>Button in Light DOM</button>

button {
  background-color: red;
  display: block;
  margin-top: 8px;
}

example-component::part(box) {
  background-color: pink;
}

// Use custom elements API v1 to register a new HTML tag and define its JS behavior
// using an ES6 class. Every instance of <fancy-tab> will have this same prototype.
customElements.define('example-component', class extends HTMLElement {
  constructor() {
    super(); // always call super() first in the constructor.

    // Attach a shadow root to <fancy-tabs>.
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <style>
        div {
            height: 150px;
            width: 150px;
            border: solid 2px;
          }
      </style>
      
      <div part="box"></div>  
      <button>Button in Shadow DOM</button>
    `;
  }
});