CSS Portal
Run
Search
« Back to
CSS ::part() Pseudo Element
<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> <script> let template = document.querySelector("#tabbed-custom-element"); globalThis.customElements.define( template.id, class extends HTMLElement { constructor() { super().attachShadow({ mode: "open" }).append(template.content); } }, ); </script>
If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!
☕ Buy a Coffee