host-part-nesting.html (923B)
1 <!doctype html> 2 <title>CSS Shadow Parts - :host::part() in nesting</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 <link rel="help" href="https://crbug.com/326526716"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id="host"></div> 9 <script> 10 test(function() { 11 let host = document.getElementById("host"); 12 host.attachShadow({ mode: "open" }).innerHTML = ` 13 <style> 14 :host { 15 &::part(mypart) { 16 color: lime; 17 } 18 } 19 </style> 20 <div part="mypart">This text should be green.</div> 21 `; 22 23 let part = host.shadowRoot.querySelector("[part]"); 24 25 assert_equals( 26 window.getComputedStyle(part).color, 27 "rgb(0, 255, 0)", 28 ":host::part() works in nesting", 29 ); 30 }, ":host::part works in nesting"); 31 </script>