/
output.min.html
22 lines (16 loc) · 2.05 KB
/
output.min.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html><meta charset=utf-8><title>Shadow parts example</title><style>tabbed-custom-element::part(tab){color:#0c0c0dcc;border-bottom:transparent solid 2px}tabbed-custom-element::part(tab):hover{background-color:#0c0c0d19;border-color:#0c0c0d33}tabbed-custom-element::part(tab):hover:active{background-color:#0c0c0d33}tabbed-custom-element::part(tab):focus{box-shadow:0 0 0 1px#0a84ff inset,0 0 0 1px#0a84ff,0 0 0 4px rgba(10,132,255,.3)}tabbed-custom-element::part(active){color:#0060df;border-color:#0a84ff!important}tabbed-custom-element-exportparts::part(bgtab){font-weight:700}tabbed-custom-element-exportparts::part(active){color:red}</style><h1>Shadow part styling for tabbed custom element</h1>
<template id=tabbed-custom-element>
<style>*,:before,:after{box-sizing:border-box;padding:1rem}:host{display:flex}</style>
<div part="active tab">Tab 1</div>
<div part=tab>Tab 2</div>
<div part=tab>Tab 3</div>
</template>
<tabbed-custom-element></tabbed-custom-element>
<hr>
<template id=tabbed-custom-element-exportparts>
<tabbed-custom-element exportparts=tab:bgtab></tabbed-custom-element>
<tabbed-custom-element exportparts=tab:bgtab,active></tabbed-custom-element>
<tabbed-custom-element exportparts=tab:bgtab,active></tabbed-custom-element>
</template>
<tabbed-custom-element-exportparts></tabbed-custom-element-exportparts>
<script type=module>globalThis.customElements.define("tabbed-custom-element",class extends HTMLElement{constructor(){super();let t=document.getElementById("tabbed-custom-element").content,e=this.attachShadow({mode:"open"});e.appendChild(t.cloneNode(!0));let o=[],a=this.shadowRoot.children;for(let n of a)n.getAttribute("part")&&o.push(n);o.forEach(t=>{t.addEventListener("click",t=>{o.forEach(t=>{t.part="tab"}),t.target.part="tab active"})})}})</script><script type=module>globalThis.customElements.define("tabbed-custom-element-exportparts",class extends HTMLElement{constructor(){super();let e=document.getElementById("tabbed-custom-element-exportparts").content,t=this.attachShadow({mode:"open"});t.appendChild(e.cloneNode(!0))}})</script>