class Button extends HTMLElement { 
  constructor() {
    super(); 
  }
}
window.customElements.define('c-button', Button);
        

      
          <c-button></c-button>
        

      
          class Button extends HTMLElement { 
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }); 
  }
}
window.customElements.define('c-button', Button);
        

      
          class Button extends HTMLElement { 
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }); 
  }
  get variation() {
    return this.getAttribute('variation');
  }
  set variation(name) { 
    if (name !== null) {
      this.setAttribute('variation', name); 
    } else {
      this.removeAttribute('variation'); 
    }
  }
  static get observedAttributes() { 
    return ['variation'];
  }
  attributeChangedCallback(attrName, oldValue, newValue) { 
    if (newValue !== oldValue) {
      this[attrName] = newValue; 
    }
  }
}
window.customElements.define('c-button', Button);
        

      
          <style>
  @import "https://codepen.io/chriscoyier/pen/VqKvZr.css";
</style>
        

      
          // External CSS
c-button {
  --display: flex;
  --padding: 10px;
  --color: white;
  --bg-color: black;
  --cursor: pointer;
  --border: 1px solid black;
} 
        

      
          <!-- Internal CSS -->
<style> 
  button {
    display: var(--display);
    padding: var(--padding);
    color: var(--color); 
    background-color: var(--bg-color); 
    cursor: var(--cursor);
    border: var(--border); 
  }
</style>
        

      
          let buttonTemplate = document.createElement('template');
buttonTemplate.innerHTML = `
  <button><slot></slot></button> 
`;
        

      
          shadowRoot.appendChild(buttonTemplate.content.cloneNode(true));
        

      
          <button><slot name="title"></slot></button>
        

      
          <c-button><slot name="title"></slot></c-button>