| <!DOCTYPE html> |
| <!-- |
| <details> and <summary> are implemented using V1 shadow roots, but it |
| must be transparent to HTML authoring. Test the following conditions. |
| 1. Any slot attribute in children of <details> or <summary> must be |
| ignored. |
| 2. Slot assignment for author shadow root must work as expected. |
| --> |
| <template> |
| <details open> |
| <summary slot="x"> |
| <span id="summary-span" slot="foo">Apple</span> |
| <slot name="fruit"></slot> |
| </summary> |
| <slot></slot> |
| Strawberry |
| </details> |
| </template> |
| <div id="host"><span>Orange</span><span slot="fruit">Grape</span></div> |
| <script> |
| 'use strict'; |
| |
| const template = document.querySelector('template'); |
| const host = document.querySelector('#host'); |
| const root = host.attachShadow({mode: 'open'}); |
| root.appendChild(document.importNode(template.content, true)); |
| |
| const span = root.querySelector('#summary-span'); |
| const root2 = span.attachShadow({mode: 'open'}); |
| root2.innerHTML = `"<slot></slot>"`; |
| </script> |
