counter-slot-order-scoping.html (1907B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS counter order and scope 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-slot-order-scoping-ref.html"> 8 </head> 9 10 <body> 11 <div id="host"> 12 <div class="counted" slot="content3">Three</div> 13 <div class="counted" slot="content1">One</div> 14 15 <div class="counted" slot="content6">Six</div> 16 <div class="counted" slot="content4">Four</div> 17 18 <div style="counter-reset: section;" slot="reset">Reset2</div> 19 20 <div class="counted" slot="content9">Nine</div> 21 <div class="counted" slot="content7">Seven</div> 22 </div> 23 24 <script> 25 function makeStyle() { 26 let style = document.createElement('style'); 27 style.textContent = ` 28 .counted { 29 counter-increment: section; 30 } 31 32 .counted::before { 33 content: "C=" counter(section) " "; 34 } 35 `; 36 return style; 37 } 38 document.body.appendChild(makeStyle()); 39 40 const shadowRoot = document 41 .getElementById('host') 42 .attachShadow({mode: 'open'}); 43 shadowRoot.innerHTML = ` 44 <div> 45 <slot name="content1"></slot> 46 <div class="counted" slot="content2">Two</div> 47 <slot name="content3"></slot> 48 49 <div style="counter-reset: section;">Reset1</div> 50 51 <slot name="content4"></slot> 52 <div class="counted" slot="content5">Five</div> 53 <slot name="content6"></slot> 54 55 <slot name="reset"></slot> 56 57 <slot name="content7"></slot> 58 <div class="counted" slot="content8">Eight</div> 59 <slot name="content9"></slot> 60 61 </div> 62 `; 63 shadowRoot.appendChild(makeStyle()); 64 </script> 65 </body> 66 </html>