TAG
CSS
JavaScript
Result
Run
License
<template id="tabbed-custom-element"> <style> *, ::before, ::after { box-sizing: border-box; padding: 1rem; } :host { display: flex; } </style> <div part="tab active">Tab 1</div> <div part="tab">Tab 2</div> <div part="tab">Tab 3</div> </template> <tabbed-custom-element></tabbed-custom-element>
tabbed-custom-element::part(tab) { color: #999; border-bottom: transparent solid 2px; } tabbed-custom-element::part(tab):hover { background-color: orange; color: #FFF; } tabbed-custom-element::part(active) { border-bottom-color: #0060df; }
window.addEventListener("load", () => { const elTemplate = document.getElementById("tabbed-custom-element"); globalThis.customElements.define( elTemplate.id, class extends HTMLElement { constructor() { super().attachShadow({ mode: "open" }).append(elTemplate.content); } } ); });
Console
expand_less
License
License
by DevDic
Close