| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| my-host { |
| display: block; |
| width: 100px; |
| height: 25px; |
| background: red; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test passes if you see a single 100px by 100px green box below.</p> |
| <my-host id="t1"><div id="host-child">text</div></my-host> |
| <my-host id="t2"><div>text</div></my-host> |
| <my-host id="t3"><div>text</div></my-host> |
| <my-host id="t4"><div>text</div></my-host> |
| |
| <script> |
| var host = document.querySelector('#t1'); |
| host.attachShadow({ mode: 'open' }).innerHTML = ` |
| <style> |
| #myslot::slotted(#host-child) { |
| background-color: green; width: 100%; height: 100%; |
| } |
| </style> |
| <slot id="myslot" style="color:green"></slot> |
| `; |
| |
| var host = document.querySelector('#t2'); |
| host.attachShadow({ mode: 'open' }).innerHTML = ` |
| <style> |
| .myclass#myslot[style]::slotted(*) { |
| background-color: green; width: 100%; height: 100%; |
| } |
| #myslot::slotted(#not-my-host-child) { |
| background-color: red; width: 100%; height: 100%; |
| } |
| #notmyslot::slotted(*) { |
| background-color: red; width: 100%; height: 100%; |
| } |
| </style> |
| <slot class="myclass" id="myslot" style="color:green"></slot> |
| `; |
| |
| var host = document.querySelector('#t3'); |
| host.attachShadow({ mode: 'open' }).innerHTML = ` |
| <style> |
| #myslot::slotted(*) { |
| background-color: green; width: 100%; height: 100%; |
| } |
| </style> |
| <slot id="myslot" style="color:green"></slot> |
| `; |
| |
| var host = document.querySelector('#t4'); |
| var shadow = host.attachShadow({ mode: 'open' }); |
| shadow.innerHTML = ` |
| <style> |
| #myslot::slotted(*) { |
| background-color: green; width: 100%; height: 100%; |
| } |
| </style> |
| <slot id="notmyslot" style="color:green"></slot> |
| `; |
| var slot = shadow.querySelector("#notmyslot"); |
| slot.offsetWidth; |
| slot.setAttribute("id", "myslot"); |
| </script> |
| </body> |
| </html> |
