<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>basic shadow-dom custom element</title>
</head>
<body>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/WebReflection/basic-shadow-dom-custom-element-JMxPdv */
customElements.define('shadow-dom', class extends HTMLElement {
connectedCallback() {
if (this.hasChildNodes()) {
const shadow = this.attachShadow(
// mode open by default, closed as mode="closed"
{mode: this.getAttribute('mode') || 'open'}
);
while (this.hasChildNodes()) {
shadow.appendChild(this.firstChild);
}
}
}
});
document.body.innerHTML =
`<div class="foo">
I am rendered in the Light DOM.
<shadow-dom>
<div class="foo">
I am rendered into the Shadow DOM.
<style>
.foo { border: 2px solid red; }
</style>
</div>
</shadow-dom>
</div>`;