has-slotted-manual-assignment.html (2562B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <title>:has-slotted with manual assignment</title> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/pull/10586" /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <test-element id="host"></test-element> 8 <script> 9 customElements.define('test-element', class extends HTMLElement { 10 connectedCallback() { 11 this.attachShadow({mode: 'open', slotAssignment: 'manual'}); 12 this.shadowRoot.append(document.createElement('slot')) 13 } 14 assign(...nodes) { 15 this.shadowRoot.querySelector('slot').assign(...nodes) 16 } 17 }); 18 19 const slot = host.shadowRoot.querySelector('slot'); 20 21 test(function () { 22 assert_equals(slot.assignedNodes().length, 0, "slot element should not match :has-slotted"); 23 assert_equals(host.shadowRoot.querySelectorAll(':has-slotted').length, 0, "slot element should not match :has-slotted"); 24 assert_false(slot.matches(':has-slotted'), "slot element should not match :has-slotted"); 25 }, ":has-slotted does not match or querySelector with no manual assigned nodes"); 26 27 test(function () { 28 host.append(document.createElement("div")); 29 assert_equals(slot.assignedNodes().length, 0, "slot element should not match :has-slotted"); 30 assert_equals(host.shadowRoot.querySelectorAll(':has-slotted').length, 0, "slot element should not match :has-slotted"); 31 assert_false(slot.matches(':has-slotted'), "slot element should not match :has-slotted"); 32 }, ":has-slotted does not match or querySelector with no manual assigned nodes - 2"); 33 34 test(function () { 35 host.assign(...host.children); 36 assert_equals(slot.assignedNodes().length, 1, "slot element should match :has-slotted with 1 child node"); 37 assert_equals(host.shadowRoot.querySelectorAll(':has-slotted').length, 1, "slot element should match :has-slotted with 1 child node"); 38 assert_true(slot.matches(':has-slotted'), "slot element should match :has-slotted with 1 child node"); 39 }, ":has-slotted does match when a child is manually assigned"); 40 41 test(function () { 42 host.assign(); 43 assert_equals(slot.assignedNodes().length, 0, "slot element should not match :has-slotted after empty"); 44 assert_equals(host.shadowRoot.querySelectorAll(':has-slotted').length, 0, "slot element should not match :has-slotted after empty"); 45 assert_false(slot.matches(':has-slotted'), "slot element should not match :has-slotted after empty"); 46 }, ":has-slotted no longer matches when no children become manually assigned"); 47 </script>