<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 = `
        div {
            height: 150px;
            width: 150px;
            border: solid 2px;
      <div part="box"></div>  
      <button>Button in Shadow DOM</button>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.