37 lines
1.1 KiB
HTML
37 lines
1.1 KiB
HTML
<!-- Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
<html>
|
|
<head>
|
|
<title>CSSOM test</title>
|
|
|
|
<script>
|
|
"use strict";
|
|
window.onload = function() {
|
|
const x = document.styleSheets[0];
|
|
x.insertRule("div { color: seagreen; }", 1);
|
|
|
|
// Add a rule with a leading newline, to test that inspector can handle it.
|
|
x.insertRule("\ndiv { font-weight: bold; }", 1);
|
|
|
|
// Add a shadow dom root and a h2 element inside it
|
|
const shadow = document.getElementById("host").attachShadow({ mode: "open" });
|
|
const shadowEl = document.createElement("h2");
|
|
shadowEl.textContent = "Hello from the shadow DOM";
|
|
shadow.appendChild(shadowEl);
|
|
|
|
const shadowDomStyleSheet = new CSSStyleSheet();
|
|
shadowDomStyleSheet.insertRule("h2 { color: tomato; background-color: gold;}");
|
|
shadow.adoptedStyleSheets = [shadowDomStyleSheet];
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
span { }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="target"> the ocean </div>
|
|
<div id="host"></div>
|
|
</body>
|
|
</html>
|