doc_cssom.html (1084B)
1 <!-- Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ --> 3 <html> 4 <head> 5 <title>CSSOM test</title> 6 7 <script> 8 "use strict"; 9 window.onload = function() { 10 const x = document.styleSheets[0]; 11 x.insertRule("div { color: seagreen; }", 1); 12 13 // Add a rule with a leading newline, to test that inspector can handle it. 14 x.insertRule("\ndiv { font-weight: bold; }", 1); 15 16 // Add a shadow dom root and a h2 element inside it 17 const shadow = document.getElementById("host").attachShadow({ mode: "open" }); 18 const shadowEl = document.createElement("h2"); 19 shadowEl.textContent = "Hello from the shadow DOM"; 20 shadow.appendChild(shadowEl); 21 22 const shadowDomStyleSheet = new CSSStyleSheet(); 23 shadowDomStyleSheet.insertRule("h2 { color: tomato; background-color: gold;}"); 24 shadow.adoptedStyleSheets = [shadowDomStyleSheet]; 25 }; 26 </script> 27 28 <style> 29 span { } 30 </style> 31 </head> 32 <body> 33 <div id="target"> the ocean </div> 34 <div id="host"></div> 35 </body> 36 </html>