Lesson 33 of 55 · javascript
Web Components – Custom Elements, Shadow DOM & Templates
Duration: 13 mins
Custom elements let you define new HTML tags.
class MyButton extends HTMLElement {
constructor(){
super();
const tmpl = document.getElementById('tpl').content;
this.attachShadow({mode:'open'}).appendChild(tmpl.cloneNode(true));
}
}
customElements.define('my-button', MyButton);
Shadow DOM encapsulates markup and styles.
<template id="tpl">
<style>button{background:#0066cc;color:#fff;padding:0.5rem;}</style>
<button><slot></slot></button>
</template>
Use <my-button> like any native element.
Example usage
<my-button>Click me</my-button>