Web Component starter

my-component.js

customElements.define('my-component', class extends HTMLElement {
    static get observedAttributes() {
        return [
            // attrs
        ];
    }
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.render();
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch(name) {
            // type converters
            default:
                this[name] = newValue;
        }
        this.render();
    }
    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                :host([hidden]) {
                    display: none !important;
                }
            </style>
            <slot></slot>
        `;
    }
});