| <!DOCTYPE html> |
| <html> |
| <body> |
| <shadow-host><span>5</span><span slot="bar">2</span></shadow-host> |
| <input type="text"> |
| <script> |
| const shadowRoot = document.querySelector('shadow-host').attachShadow({mode: 'closed'}); |
| shadowRoot.innerHTML = ` |
| <span>1</span> |
| <inner-host> |
| <slot name="bar" slot="foo"><span>FAIL - named slot fallback</span></slot> |
| <span>FAIL - unassigned content</span> |
| <span slot="foo">3</span> |
| </inner-host> |
| <slot><span>FAIL - default slot fallback</span></slot> |
| <span>6</span>`; |
| const innerHost = shadowRoot.querySelector('inner-host'); |
| innerHost.attachShadow({mode: 'closed'}).innerHTML = ` |
| <slot name="foo"></slot> |
| <span>4</span>`; |
| |
| document.addEventListener('testnormalworld', function (event) { |
| alert(window[event.detail] ? `FAIL: ${event.detail} was present in the normal world` : `PASS: ${event.detail} was not present in the normal world`); |
| }); |
| |
| </script> |
| </body> |
| </html> |
