host-part-002.html (1825B)
1 <!DOCTYPE HTML> 2 <title>CSS Shadow Parts - :host::part() cascading</title> 3 <link rel="help" href="https://drafts.csswg.org/css-shadow-parts-1/#part"> 4 <link rel="help" href="https://drafts.csswg.org/css-scoping-1/#host-selector"> 5 <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#cascade-sort"> 6 <link rel="help" href="https://drafts.csswg.org/selectors-4/#specificity"> 7 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 8 <link rel="author" title="Google" href="http://www.google.com/"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 12 <div id="host"></div> 13 14 <script> 15 16 test(function() { 17 let host = document.getElementById("host"); 18 let shadow = host.attachShadow({mode: "open"}); 19 // Make three rules with equal specificity, so that they cascade by 20 // order. Pseudo-elements and elements have the same specificity. 21 // Pseudo-classes and attribute selectors have the same specificity. 22 shadow.innerHTML = ` 23 <style> 24 div[part="part-name"] { 25 color: red; 26 } 27 :host::part(part-name) { 28 color: lime; 29 background-color: red; 30 } 31 div[part="part-name"] { 32 background-color: green; 33 } 34 </style> 35 <div part="part-name"></div> 36 `; 37 38 let part_cs = getComputedStyle(shadow.querySelector('div[part="part-name"]')); 39 40 assert_equals(part_cs.color, "rgb(0, 255, 0)", 41 ":host::part() selectors override earlier selectors with " + 42 "same encapsulation context and specificity"); 43 assert_equals(part_cs.backgroundColor, "rgb(0, 128, 0)", 44 ":host::part() selectors are overridden by later selectors " + 45 "with same encapsulation context and specificity"); 46 }, ":host::part has correct cascading behavior"); 47 48 </script>