зеркало из https://github.com/mozilla/gecko-dev.git
30 строки
836 B
HTML
30 строки
836 B
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<script>
|
|
customElements.define("custom-div", class extends HTMLDivElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
|
|
let p = document.createElement("p");
|
|
p.append(document.createElement("slot"));
|
|
let span = document.createElement("span");
|
|
span.textContent = "This should not be green.";
|
|
this.shadowRoot.append(p, span);
|
|
}
|
|
}, {
|
|
extends: "div",
|
|
});
|
|
</script>
|
|
<style>
|
|
span { color: red; }
|
|
div.x > span { color: green; }
|
|
</style>
|
|
</head>
|
|
<body onload="document.body.offsetTop; document.querySelector('div').className = 'x'">
|
|
<div is="custom-div">
|
|
<span>This should be green.</span>
|
|
</div>
|
|
</body>
|
|
</html>
|