| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>HTML LI element: counter order with Shadow DOM and SLOT</title> |
| <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> |
| <link rel="help" href="https://www.w3.org/TR/css-lists-3/#inheriting-counters"> |
| <link rel="match" href="counter-list-item-slot-order-ref.html"> |
| <style> |
| li::before { content: counters(list-item,'.') ' '; } |
| </style> |
| </head> |
| |
| <body> |
| <div id="host"> |
| <li slot="list3">Two Point One</li> |
| <li slot="list2">Two</li> |
| <li slot="list1">One</li> |
| </div> |
| |
| <script> |
| const shadowRoot = document |
| .getElementById('host') |
| .attachShadow({mode: 'open'}); |
| shadowRoot.innerHTML = ` |
| <ol> |
| <slot name="list1"></slot> |
| <slot name="list2"></slot> |
| <ol> |
| <slot name="list3"></slot> |
| </ol> |
| </ol> |
| `; |
| </script> |
| </body> |
| </html> |
