host-specificity-002.html (866B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Test: :host is accounted for during specificity computation</title> 4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 5 <link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector"> 6 <link rel="help" href="https://drafts.csswg.org/selectors/#specificity-rules"> 7 <link rel="help" href="https://bugzil.la/1454165"> 8 <link rel="match" href="reference/green-box.html"> 9 <p>Test passes if you see a single 100px by 100px green box below.</p> 10 <div id="host"></div> 11 <script> 12 host.attachShadow({ mode: 'open' }).innerHTML = ` 13 <style> 14 .foo span { 15 display: block; 16 width: 100px; 17 height: 100px; 18 background: red; 19 } 20 :host span { 21 background: green; 22 } 23 </style> 24 <div class="foo"><span></span></div> 25 `; 26 </script>