The following code does not render the CategoryElement's children - only the <p> element within the Shadow Root. How do I make the CategoryElement's children render?
<html>
<head>
</head>
<body>
<script>
class CategoryElement extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.header = document.createElement('p');
this.header.innerText = 'Shadow Header';
this.shadowRoot.append(this.header);
}
}
customElements.define('category-element', CategoryElement);
var elem = document.createElement('category-element');
document.body.appendChild(elem);
var outer = document.createElement('p');
outer.innerText = 'Outer Header';
elem.appendChild(outer);
</script>
</body>
<html>I believe this gets you there, but I'm no shadow dom expert by any stretch of the imagination.
I added .shadowRoot as shown here:
elem.shadowRoot.appendChild(outer);
When I inspect with the dev tools I can see that both <p> are in side the shadow-root element (if that's the correct way to refer to it).
</head>
<body>
<script>
class CategoryElement extends HTMLElement {
constructor() {
super();
this.attachShadow({
mode: 'open'
});
this.header = document.createElement('p');
this.header.innerText = 'Shadow Header';
this.shadowRoot.append(this.header);
}
}
customElements.define('category-element', CategoryElement);
var elem = document.createElement('category-element');
document.body.appendChild(elem);
var outer = document.createElement('p');
outer.innerText = 'Outer Header';
elem.shadowRoot.appendChild(outer);
</script>
</body>
<html>