counter-list-item-slot-order.html (967B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML LI element: counter order with Shadow DOM and SLOT</title> 5 <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> 6 <link rel="help" href="https://www.w3.org/TR/css-lists-3/#inheriting-counters"> 7 <link rel="match" href="counter-list-item-slot-order-ref.html"> 8 <style> 9 li::before { content: counters(list-item,'.') ' '; } 10 </style> 11 </head> 12 13 <body> 14 <div id="host"> 15 <li slot="list3">Two Point One</li> 16 <li slot="list2">Two</li> 17 <li slot="list1">One</li> 18 </div> 19 20 <script> 21 const shadowRoot = document 22 .getElementById('host') 23 .attachShadow({mode: 'open'}); 24 shadowRoot.innerHTML = ` 25 <ol> 26 <slot name="list1"></slot> 27 <slot name="list2"></slot> 28 <ol> 29 <slot name="list3"></slot> 30 </ol> 31 </ol> 32 `; 33 </script> 34 </body> 35 </html>