I have a html web component without shadow dom and I try to add a slot. For some reason it does not work.
I expected it to switch "Foo bar" to "Hello world" but that does not happen.
- Does slots only works with shadow dom and a template?
- How can I get it to work?
class HelloWorld extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<div>
<slot name="element-name">Foo Bar</slot>
</div>
`;
}
}
customElements.define("hello-world", HelloWorld);
<hello-world>
<span slot="element-name">Hello World</span>
</hello-world>
Yes,
<slot>
only works inside shadowDOM in a native (JSWC) Web Componentor native HTML Element (you can attach shadowDOM to)
Slotted content is reflected lightDOM content
See: ::slotted CSS selector for nested children in shadowDOM slot
A Web Component without shadowDOM only has innerHTML
If you do
this.innerHTML=
on such a Web Component it replaces theinnerHTML
, just like on any other HTML tagwith shadowDOM: