javascriptcomponentsslotsnative-web-component

Slots does not work on a html web component without shadow dom

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.

  1. Does slots only works with shadow dom and a template?
  2. 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>

Solution

  • Yes, <slot> only works inside shadowDOM in a native (JSWC) Web Component

    or 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 the innerHTML, just like on any other HTML tag

    with shadowDOM:

    <hello-world>
  <b slot="none">Mighty</b>
  <span slot="title">Web Components</span>
  Hello! 
</hello-world>

<script>
customElements.define("hello-world", class extends HTMLElement {
  constructor() {
    super()
      .attachShadow({mode:"open"})
      .innerHTML = `<slot></slot><slot name="title">Foo Bar</slot>`;
    this.onclick = (evt) => this.querySelector('b').slot = "title";
  }
});
</script>