scope-shadow-sharing.html (992B)
1 <!DOCTYPE html> 2 <html class="test-wait"> 3 <title>@scope - Shadow DOM with shared style data</title> 4 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles"> 5 <link rel="match" href="scope-shadow-sharing-ref.html"> 6 <div id="host1"> 7 </div> 8 <div id="host2"> 9 </div> 10 <template id="t"> 11 <style> 12 div { 13 padding: 3px; 14 border: 1px solid; 15 background: white; 16 } 17 18 @scope { 19 div { 20 background: red; 21 } 22 } 23 24 @scope (.explicit-scope) { 25 div { 26 background: green; 27 } 28 } 29 </style> 30 <div> 31 <style> 32 @scope { 33 div { 34 background: blue; 35 } 36 } 37 </style> 38 <div></div> 39 </div> 40 <div class="explicit-scope"> 41 <div></div> 42 </div> 43 </template> 44 <script> 45 const hosts = [host1, host2]; 46 for (const host of hosts) { 47 const shadowRoot = host.attachShadow({ mode: "open" }); 48 shadowRoot.append(t.content.cloneNode(true)); 49 } 50 document.documentElement.className = ''; 51 </script> 52 </html>