/** * Copyright (c) Cisco Systems, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * */ /** This mixin help to manage slottable nodes (light DOM children) that become the contents of `` element. * * @property({ type: Array, attribute: false }) slotted <--- when an element is inserted in a slot. * * Example: * * @customElements("custom-element") * class CustomElement extends SlottedMixin(LitElement) { * @query('slot[name="custom"]') tabSlot?: HTMLSlotElement; * get slotElement() { <--- You need to override this getter in parent component class to return specific slot (default or named) from your component’s render root. return this.tabSlot; } protected filterSlotted() { <--- You need to override this method in parent component class to return filtered elements from slotted. (See tab implementation for example) return Array.from(this.children) as HTMLElement[]; <--- By default this method return all children of custom component render root. } protected slottedChanged() { <--- You can override this method to handle when the node(s) contained in slotElement change. } render() { return html` `; } * } */ import { LitElement } from "lit"; export type AnyConstructor = new (...args: any[]) => A; export interface SlotableInterface { slotted: HTMLElement[]; } export declare abstract class SlotableClass extends LitElement { protected handleSlotted?(): void; protected slottedChanged?(): void; protected filterSlotted?(): HTMLElement[]; } export declare const SlottedMixin: >(base: T) => T & AnyConstructor;