Basic component

basic-component.html

<template id="my-custom-component">
    <span></span>
</template>
<script type="text/javascript">
    class MyCustomComponent extends HTMLElement {
        constructor() {
            super();
            const template = document.getElementById('my-custom-component');
            const templateContent = template.content;

            this.attachShadow({ mode: 'open' })
                .appendChild(templateContent.cloneNode(true));

            this.displayLabel = this.shadowRoot.querySelector('span');
        }

        static get observedAttributes() {
            return ['my-label'];
        }

        attributeChangedCallback(name, oldValue, newValue) {
            switch (name) {
                case 'my-label':
                    this.displayLabel.innerText = newValue;
            }
        }
    }
    customElements.define('my-custom-component', MyCustomComponent);
</script>
<my-custom-component my-label="This is my custom component"></my-custom-component>