exportparts-layered.html (1004B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="author" href="mailto:wpt@keithcirkel.co.uk" title="Keith Cirkel"> 4 <link rel="help" href="https://drafts.csswg.org/css-shadow-parts/"> 5 <link rel="match" href="exportparts-layered.ref.html"> 6 <style> 7 my-parent::part(base) { font-size: 1px !important; } 8 my-child::part(base) { font-size: 1px !important; } 9 my-parent::part(child-base) { font-size: 2rem; } 10 </style> 11 <my-parent> 12 <template shadowrootmode="open"> 13 <style> 14 :host::part(base) { background: red !important; } 15 my-child::part(child-base) { background: red !important; } 16 :host::part(child-base) { background: green; } 17 </style> 18 <my-child exportparts="base:child-base"> 19 <template shadowrootmode="open"> 20 <style> 21 :host::part(base) { background: red; } 22 :host::part(child-base) { background: red !important; } 23 </style> 24 <span part="base">Should be large and green</span> 25 </template> 26 </my-child> 27 </template> 28 </my-parent>