@legumeinfo/web-components
    Preparing search index...

    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.

    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>
    `;
    }

    }

    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>

    Implements

    • ReactiveController
    Index

    Constructors

    Properties

    Constructors

    Properties

    _children: Element[] = []
    _slotRefs: Ref<HTMLSlotElement>[]