33 lines
973 B
HTML
33 lines
973 B
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<style>
|
|
div > span { color: green; }
|
|
p > span { color: red !important; }
|
|
p { color: purple }
|
|
</style>
|
|
<script>
|
|
customElements.define("custom-div", class extends HTMLDivElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
|
|
let style = document.createElement("style");
|
|
style.textContent = "p > span { color: red; } p { color: purple }";
|
|
let span = document.createElement("span");
|
|
span.textContent = "This should not be green";
|
|
let p = document.createElement("p");
|
|
p.append(document.createElement("slot"));
|
|
this.shadowRoot.append(style, span, p);
|
|
}
|
|
}, {
|
|
extends: "div",
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div is="custom-div">
|
|
<span>This should be green</span><br/>
|
|
<b>This should be purple</b>
|
|
</div>
|
|
</body>
|
|
</html>
|