shadow-dom-part.html (922B)
1 <!DOCTYPE html> 2 <title>Counter style tree-scoped references</title> 3 <link rel="help" href="https://drafts.csswg.org/css-counter-styles-3/#the-counter-style-rule"> 4 <link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names"> 5 <link rel="author" href="mailto:xiaochengh@chromium.org"> 6 <link rel="match" href="shadow-dom-part-ref.html"> 7 <meta name="assert" content="The list in the shadow tree should use the counter style defined in the outer document, because it's styled by the outer document"> 8 9 <style> 10 @counter-style foo { 11 system: fixed; 12 symbols: A B C; 13 } 14 #host::part(list) { 15 list-style-type: foo; 16 } 17 </style> 18 19 <div id="host"></div> 20 21 <script> 22 document.getElementById("host").attachShadow({mode: 'open'}).innerHTML = ` 23 <style> 24 @counter-style foo { 25 system: fixed; 26 symbols: D E F; 27 } 28 </style> 29 <ol part="list" style="list-style-position: inside"> 30 <li></li> 31 <li></li> 32 <li></li> 33 </ol> 34 `; 35 </script>