Class LisSlotController

A controller that allows components to use the <slot> tag when their Shadow DOM is disabled.

Limitations include all slot content must be wrapped in an element, e.g. text must be in a <span> tag, and elements that Web Browsers will remove if not inside the correct tag must be wrapped in a <template> tag, e.g. table rows. The content of a <template> tag must also be wrapped in an element.

Example

In addition the typical host parameter, the controller constructor takes references for all the slots it should control.

import {LitElement, html} from 'lit';
import {Ref, createRef, ref} from 'lit/directives/ref.js';

@customElement('element-with-slot')
export class ElementWithSlots extends LitElement {

  // disable the Shadow DOM
  override createRenderRoot() {
    return this;
  }

  // the slot controller
  protected slotController: LisSlotController;

  // slot references for the controller
  protected defaultSlotRef: Ref<HTMLSlotElement> = createRef();
  protected namedSlotRef: Ref<HTMLSlotElement> = createRef();

  constructor() {
    super();
    // instantiate the controller with the references
    this.slotController = new LisSlotController(this, this.defaultSlotRef, this.namedSlotRef);
  }

  override render() {
    return html`
    <slot ${ref(this.defaultSlotRef)}>default slot content</slot>
    <slot name="named-slot" ${ref(this.namedSlotRef)}>default named slot content</slot>
    `;
  }

}
Copy

The above element can be used as follows:

<element-with-slots>
  <template>
    <span>This will be placed in the unnamed slot and replace its default content</span>
  </template>
  <span slot="named-slot">This will be placed in the named slot and replace its default content</span>
</element-with-slots>
Copy