has-slotted-changing-002.html (2925B)
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Changing content targetting :has-slotted through multiple shadow roots</title> 7 <link rel="help" href="https://github.com/w3c/csswg-drafts/pull/10586"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="/resources/testdriver-actions.js"></script> 13 </head> 14 15 <body> 16 17 <my-element id="test">Test</my-element> 18 <template id="myTemplate"> 19 <slot></slot> 20 <p id="target">This text will be styled.</p> 21 <style> 22 p { 23 color: rgb(0 255 0); 24 } 25 slot:not(:has-slotted) + p { 26 color: rgb(0 0 255); 27 } 28 </style> 29 </template> 30 31 <script> 32 customElements.define('my-element', class extends HTMLElement { 33 constructor() { 34 super(); 35 this.attachShadow({ 36 mode: 'open', 37 slotAssignment: 'manual', 38 }); 39 this.shadowRoot.append(myTemplate.content.cloneNode(true)); 40 } 41 42 get slot() { 43 return this.shadowRoot.querySelector('slot'); 44 } 45 }); 46 47 const blue = 'rgb(0, 0, 255)'; 48 const green = 'rgb(0, 255, 0)'; 49 test(function (t) { 50 const test = document.getElementById('test'); 51 const target = test.shadowRoot.getElementById('target'); 52 t.add_cleanup(() => { test.innerHTML = 'Test' }); 53 let styles = getComputedStyle(target); 54 assert_equals(styles.getPropertyValue('color'), blue); 55 }, "empty node is blue"); 56 57 test(function (t) { 58 const test = document.getElementById('test'); 59 const target = test.shadowRoot.getElementById('target'); 60 t.add_cleanup(() => { test.innerHTML = 'Test' }); 61 test.slot.assign(test.childNodes[0]) 62 styles = getComputedStyle(target); 63 assert_equals(test.slot.assignedNodes().length, 1); 64 assert_equals(styles.getPropertyValue('color'), green); 65 test.slot.assign() 66 styles = getComputedStyle(target); 67 assert_equals(styles.getPropertyValue('color'), blue); 68 }, "manually assigning a text node is green, emptying assignment is blue"); 69 70 test(function (t) { 71 const test = document.getElementById('test'); 72 const target = test.shadowRoot.getElementById('target'); 73 t.add_cleanup(() => { test.innerHTML = 'Test' }); 74 75 test.innerHTML = '<div></div>'; 76 assert_equals(styles.getPropertyValue('color'), blue); 77 78 test.slot.assign(...test.children) 79 styles = getComputedStyle(target); 80 assert_equals(test.slot.assignedNodes().length, 1); 81 assert_equals(styles.getPropertyValue('color'), green); 82 test.slot.assign() 83 styles = getComputedStyle(target); 84 assert_equals(styles.getPropertyValue('color'), blue); 85 }, "manually assigning a Element is green, emptying assignment is blue"); 86 </script> 87 </body> 88 89 </html>