| <!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"></my-host> |
| <my-host id="t2" class="match"></my-host> |
| <my-host id="t3" class="no-match"></my-host> |
| <my-host id="t4" class="match"><div></div></my-host> |
| |
| <script> |
| var host = document.querySelector('#t1'); |
| host.attachShadow({ mode: 'open' }).innerHTML = ` |
| <style> |
| :host > div { |
| background-color: green; width: 100%; height: 100%; |
| } |
| </style> |
| <div></div> |
| `; |
| |
| var host = document.querySelector('#t2'); |
| host.attachShadow({ mode: 'open' }).innerHTML = ` |
| <style> |
| div { background-color: red; width: 100%; height: 100%; } |
| :host(.match) .descendant { |
| background-color: green; |
| } |
| </style> |
| <div><div class="descendant"></div></div> |
| `; |
| |
| var host = document.querySelector('#t3'); |
| host.attachShadow({ mode: 'open' }).innerHTML = ` |
| <style> |
| div { background-color: green; width: 100%; height: 100%; } |
| :host(.match) div { |
| background-color: red; |
| } |
| </style> |
| <div></div> |
| `; |
| |
| var host = document.querySelector('#t4'); |
| host.attachShadow({ mode: 'open' }).innerHTML = ` |
| <style> |
| :host(.match) ::slotted(div) { |
| background-color: green; width: 100%; height: 100%; |
| } |
| </style> |
| <slot></slot> |
| `; |
| |
| </script> |
| </body> |
| </html> |
