shadow-link-rel-stylesheet-no-style-leak.html (724B)
1 <!doctype html> 2 <title>CSS Test: <link rel="stylesheet"> in Shadow DOM doesn't affect the normal DOM</title> 3 <link rel="help" href="https://html.spec.whatwg.org/#link-type-stylesheet"> 4 <link rel="help" href="https://drafts.csswg.org/css-scoping/#selectors-data-model"> 5 <link rel="match" href="reference/green-box.html"> 6 <p>Test passes if you see a single 100px by 100px green box below.</p> 7 <style> 8 #light-dom { 9 width: 100px; 10 height: 100px; 11 background: green; 12 color: green; 13 } 14 </style> 15 <div id="host">FAIL</div> 16 <div id="light-dom"></div> 17 <script> 18 host.attachShadow({ mode: "open" }).innerHTML = ` 19 <link rel="stylesheet" href="data:text/css,div { background: red !important }"> 20 `; 21 </script>