featureless-005.html (856B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>:has() works on featureless elements *if* the rest of the selector does too</title> 4 <link rel="help" href="https://drafts.csswg.org/selectors-4/#featureless"> 5 <link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> 6 <p>Test passes if there is a filled green square.</p> 7 <div class=host> 8 <template shadowrootmode="open"> 9 <style> 10 div { 11 width: 100px; 12 height: 50px; 13 } 14 .red { background-color: red; } 15 .green { background-color: green; } 16 17 :host:has(.t1) .t1 { 18 background-color: green; 19 } 20 21 :has(.t2) .t2 { 22 background-color: red; 23 } 24 </style> 25 <div class="red t1"></div> 26 <div class="green t2"></div> 27 <slot></slot> 28 </template> 29 <section></section> 30 </div>