element-vir - v26.14.3
    Preparing search index...

    Type Alias DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>

    Initialization for an element-vir declarative element. This defines all the pieces required for rendering the element.

    type DeclarativeElementInit<
        TagName extends CustomElementTagName,
        Inputs extends PropertyInitMapBase,
        State extends PropertyInitMapBase,
        EventsInit extends EventsInitMap,
        HostClassKeys extends BaseStringName<TagName>,
        CssVarKeys extends BaseStringName<TagName>,
        SlotNames extends ReadonlyArray<string>,
        TestIds extends ReadonlyArray<string>,
    > = {
        cleanup?: InitCallback<
            TagName,
            Inputs,
            State,
            EventsInit,
            HostClassKeys,
            CssVarKeys,
            SlotNames,
            TestIds,
        >;
        cssVars?: CssVarsInitMap<TagName, CssVarKeys>;
        events?: EventsInit;
        hostClasses?: HostClassesInitMap<TagName, HostClassKeys, Inputs, State>;
        init?: InitCallback<
            TagName,
            Inputs,
            State,
            EventsInit,
            HostClassKeys,
            CssVarKeys,
            SlotNames,
            TestIds,
        >;
        options?: Partial<DeclarativeElementDefinitionOptions>;
        render: RenderCallback<
            TagName,
            Inputs,
            State,
            EventsInit,
            HostClassKeys,
            CssVarKeys,
            SlotNames,
            TestIds,
        >;
        slotNames?: SlotNames;
        state?: (
            params: Omit<
                RenderParams<
                    TagName,
                    Inputs,
                    any,
                    EventsInit,
                    HostClassKeys,
                    CssVarKeys,
                    SlotNames,
                    TestIds,
                >,
                "state"
                | "updateState",
            >,
        ) => Extract<keyof State, keyof HTMLElement> extends never
            ? Extract<keyof State, keyof Inputs> extends never
                ? State
                : `ERROR: Cannot define an element state property that clashes with input properties: ${Extract<
                    keyof State,
                    keyof Inputs,
                > extends string
                | number
                | bigint
                | boolean
                | null
                | undefined
                    ? Extract<keyof State, keyof Inputs>
                    : ""}`
            : `ERROR: Cannot define an element state property that clashes with native HTMLElement properties: ${Extract<
                keyof State,
                keyof HTMLElement,
            >}`;
        styles?: CSSResult
        | StylesCallback<TagName, HostClassKeys, CssVarKeys>;
        tagName: TagName;
        testIds?: TestIds;
    }

    Type Parameters

    Index

    Properties

    cleanup? cssVars? events? hostClasses? init? options? render slotNames? state? styles? tagName testIds?

    Properties

    cleanup?: InitCallback<
        TagName,
        Inputs,
        State,
        EventsInit,
        HostClassKeys,
        CssVarKeys,
        SlotNames,
        TestIds,
    >
    cssVars?: CssVarsInitMap<TagName, CssVarKeys>

    CSS Vars for the component. Keys of this object should be kebab-case and start with the element's tag name.

    Values of this object represent the default fallback value for the given CSS var. These are then passed to the styles property, which must be a callback to take advantage of these.

    events?: EventsInit

    Events that the element can dispatch. (These can be thought of as "outputs".)

    hostClasses?: HostClassesInitMap<TagName, HostClassKeys, Inputs, State>

    HTML host classes. Values can be callbacks to determine when a host class should be defined, based on current instance state or inputs, or just false to indicate that the host class will only be manually set.

    init?: InitCallback<
        TagName,
        Inputs,
        State,
        EventsInit,
        HostClassKeys,
        CssVarKeys,
        SlotNames,
        TestIds,
    >

    Called as part of the first render call, before the first render call.

    options?: Partial<DeclarativeElementDefinitionOptions>
    render: RenderCallback<
        TagName,
        Inputs,
        State,
        EventsInit,
        HostClassKeys,
        CssVarKeys,
        SlotNames,
        TestIds,
    >
    slotNames?: SlotNames
    state?: (
        params: Omit<
            RenderParams<
                TagName,
                Inputs,
                any,
                EventsInit,
                HostClassKeys,
                CssVarKeys,
                SlotNames,
                TestIds,
            >,
            "state"
            | "updateState",
        >,
    ) => Extract<keyof State, keyof HTMLElement> extends never
        ? Extract<keyof State, keyof Inputs> extends never
            ? State
            : `ERROR: Cannot define an element state property that clashes with input properties: ${Extract<
                keyof State,
                keyof Inputs,
            > extends string
            | number
            | bigint
            | boolean
            | null
            | undefined
                ? Extract<keyof State, keyof Inputs>
                : ""}`
        : `ERROR: Cannot define an element state property that clashes with native HTMLElement properties: ${Extract<
            keyof State,
            keyof HTMLElement,
        >}`

    Make sure to define this at the top of your element init object or TypeScript will fail to infer the element's state type.

    Setup the element's initial state. This is only called once per element instance, before the first render. The return type of this method becomes the element's state type.

    styles?: CSSResult | StylesCallback<TagName, HostClassKeys, CssVarKeys>

    Static styles. These should not and cannot change.

    tagName: TagName

    HTML tag name. This should not be used directly, as interpolating it with the html tagged template from this package is preferred.

    testIds?: TestIds

    Settings

    Member Visibility

    On This Page

    Properties