| <!DOCTYPE html> |
| <body> |
| <p>Test passes if you see a single 100px by 100px green box below.</p> |
| <div id="t1"> |
| <span>FAIL</span> |
| </div> |
| <div id="t2"> |
| <span slot="second-slot">FAIL</span> |
| </div> |
| <div id="t3"> |
| <span>FAIL</span> |
| </div> |
| <div id="t4"> |
| <span>FAIL</span> |
| </div> |
| <div id="t5"> |
| <span selected>FAIL</span> |
| </div> |
| <div> |
| </div> |
| <script> |
| |
| function attachShadow(host, selector) |
| { |
| const shadow = host.attachShadow({mode: 'closed'}); |
| shadow.innerHTML = ` |
| <style> |
| :host { |
| width: 100px; |
| height: 20px; |
| background: green; |
| color: red; |
| } |
| ${selector} { |
| color: green; |
| } |
| </style> |
| <slot></slot> |
| <slot name="second-slot"></slot>`; |
| return shadow; |
| } |
| |
| { |
| const host = document.querySelector('#t1'); |
| attachShadow(host, '::slotted(.selected)'); |
| const span = host.querySelector('span'); |
| getComputedStyle(span).backgroundColor; |
| span.className = 'selected'; |
| } |
| |
| { |
| const host = document.querySelector('#t2'); |
| attachShadow(host, '[name=second-slot]::slotted(#selected)'); |
| const span = host.querySelector('span'); |
| getComputedStyle(span).backgroundColor |
| span.id = 'selected'; |
| } |
| |
| { |
| const host = document.querySelector('#t3'); |
| attachShadow(host, '::slotted([selected])'); |
| const span = host.querySelector('span'); |
| getComputedStyle(span).backgroundColor; |
| span.setAttribute('selected', 'selected'); |
| } |
| |
| { |
| const host = document.querySelector('#t4'); |
| const shadow = host.attachShadow({mode: 'closed'}); |
| shadow.innerHTML = `<div><slot></slot></div>`; |
| const deepHost = shadow.querySelector('div'); |
| attachShadow(deepHost, '::slotted(.selected)'); |
| const span = host.querySelector('span'); |
| getComputedStyle(span).backgroundColor; |
| span.className = 'selected'; |
| } |
| |
| { |
| const host = document.querySelector('#t5'); |
| const shadow = host.attachShadow({mode: 'closed'}); |
| shadow.innerHTML = `<div><slot slot="second-slot"></slot></div>`; |
| const deepHost = shadow.querySelector('div'); |
| attachShadow(deepHost, '[name=second-slot]::slotted(:not([selected]))'); |
| const span = host.querySelector('span'); |
| getComputedStyle(span).backgroundColor; |
| span.removeAttribute('selected'); |
| } |
| |
| </script> |
