An example of custom HTML elements and using the shadow DOM.

CustomElements.js

customElements.define('my-element', class extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({mode: 'open'});
        shadow.innerHTML = `
          <style> #custom-shadow { color: red; }   ::slotted(h1) { font-size: 38px; }   :host { width: 600px; }</style>
          <slot id="headerSlot" name="header"></slot>
          <div id="custom-shadow">My custom shadow element</div>
          <slot id="footerSlot" name="footer"></slot>
		    `;
	this.addEventListener('click', e => {
		this.toggleSomething();
	});
    }
	
    toggleSomething() {
	//...    
    }
	
    get disabled() {
	return this.hasAttribute('disabled');
    }
	
    set disabled(val) {
	if (val) {
	    this.setAttribute('disabled', '');
	} else {
	    this.removeAttribute('disabled');
	}
    }
});

//  <my-element>
//    <h1 slot="header">My Header Slot</h1>
//    <button slot="footer">Logout</button>
//    <a slot="footer">Copyright info</a>
//  </my-element>