host-part-003.html (973B)
1 <!DOCTYPE html> 2 <title>CSS Shadow Parts - :host::part() not matching in inner scope</title> 3 <link rel="help" href="https://drafts.csswg.org/css-shadow-parts/#part"> 4 <link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <div id="outer"> 8 <template shadowrootmode="open"> 9 <style> 10 :host::part(x) { 11 color: red; 12 } 13 </style> 14 <div id="inner"> 15 <template shadowrootmode="open"> 16 <style> 17 p { color: green; } 18 </style> 19 <p part="x">This should not be red</p> 20 </template> 21 </div> 22 </template> 23 </div> 24 <script> 25 test(() => { 26 const part = outer.shadowRoot.querySelector("#inner").shadowRoot.querySelector("p"); 27 assert_equals(getComputedStyle(part).color, "rgb(0, 128, 0)"); 28 }, ":host::part() should only match when the part is in the same tree as the rule"); 29 </script>