My own Base class for all my Web Components. There are two versions: light and shadow.
Use if you want to encapsulate your logic within a special section of the HTML document.
class YourComponent extends LightElement {
static {
this.register("your-component", YourComponent);
}
render() {
// Regular DOM manipulation here here 😐
}
}Useful if you want to encapsulate and completely detach your logic from the document. Neither the cascade, nor any other component will access it.
class YourComponent extends ShadowElement {
static {
this.register("your-component", YourComponent);
}
render() {
return "<div>👋 from the Shadow DOM</div>";
}
}