HTML in Custom Elements with shadowDOM remains (invisible) in lightDOM
You either move it yourself:
<my-element>
Hello World, I came from lightDOM
</my-element>
<script>
customElements.define("my-element", class extends HTMLElement {
constructor() {
super().attachShadow({
mode: 'open'
}); // sets and returns thi.shadowRoot for free
this.wrapper = this.shadowRoot.appendChild(document.createElement('H1'));
this.wrapper.innerHTML = "please click me";
}
connectedCallback() {
this.onclick = () => this.wrapper.innerHTML = this.innerHTML;
}
});
</script>Or you use shadowDOM SLOTs
<style>
my-element{
color:green;
}
</style>
<my-element>
Hello World, I am REFLECTED from lightDOM
</my-element>
<script>
customElements.define("my-element", class extends HTMLElement {
constructor() {
super().attachShadow({
mode: 'open'
}); // sets and returns thi.shadowRoot for free
this.wrapper = this.shadowRoot.appendChild(document.createElement('H1'));
this.wrapper.innerHTML = "<slot></slot";
}
connectedCallback() {
}
});
</script>Note how content is styled!
The text/html remains IN lightDOM, it is reflected IN shadowDOM
Do read: ::slotted CSS selector for nested children in shadowDOM slot
CLICK HERE to find out more related problems solutions.