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

    Class DeclarativeElement<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>Abstract

    Abstract class base for all declarative elements.

    Type Parameters

    Hierarchy

    • LitElement
      • DeclarativeElement
    Index

    MISSING CATEGORY

    constructor _internalRenderCount _lastRenderedProps _lastRenderError definition instanceInputs instanceState observablePropertyListenerMap assign assignedInputs cssVars elementOptions events hostClasses init InputsType render slotNames StateType tagName testIds UpdateStateType assignInputs destroy

    rendering

    render

    styles

    styles

    MISSING CATEGORY

    Abstract_internalRenderCount

    _internalRenderCount: number

    Abstract_lastRenderedProps

    _lastRenderedProps: Readonly<
        Pick<
            RenderParams<any, Inputs, State, any, any, any, any, any>,
            "inputs" | "state",
        >,
    >

    Abstract_lastRenderError

    _lastRenderError: Error | undefined
    definition: DeclarativeElementDefinition<
        TagName,
        Inputs,
        State,
        EventsInit,
        HostClassKeys,
        CssVarKeys,
        SlotNames,
        TestIds,
    >

    The element definition for this element instance.

    instanceInputs: Inputs
    instanceState: State
    observablePropertyListenerMap: ObservableListenerMap<State & Inputs>
    assign: (inputsObject: never) => never

    Assign inputs to an element instantiation. Use only on the opening tag.

    import {html} from 'element-vir';

    const myTemplate = html`
        <${MyElement.assign({input1: 'a', input2: 'b'})}></${MyElement}>
    `;
    assignedInputs: PropertyInitMapBase | undefined
    cssVars: CssVarDefinitions<
        Readonly<
            Record<`${string}-${string}-${string}`, string | number | CSSResult>,
        >,
    >
    elementOptions: DeclarativeElementDefinitionOptions
    events: EventDescriptorMap<`${string}-${string}`, EventsInitMap>
    hostClasses: HostClassNamesMap<string, `${string}-${string}-${string}`>
    init: DeclarativeElementInit<
        `${string}-${string}`,
        PropertyInitMapBase,
        PropertyInitMapBase,
        EventsInitMap,
        `${string}-${string}-${string}`,
        `${string}-${string}-${string}`,
        readonly string[],
        readonly string[],
    >
    InputsType: PropertyInitMapBase
    render: RenderCallback<
        `${string}-${string}`,
        PropertyInitMapBase,
        PropertyInitMapBase,
        EventsInitMap,
        `${string}-${string}-${string}`,
        `${string}-${string}-${string}`,
        readonly string[],
        readonly string[],
    >
    slotNames: Readonly<
        Readonly<{ [key: string]: `${string}-${string}-slot-${string}` }>,
    >
    StateType: Readonly<PropertyInitMapBase>
    tagName: `${string}-${string}`
    testIds: Readonly<
        Readonly<{ [key: string]: `${string}-${string}-test-id-${string}` }>,
    >
    UpdateStateType: UpdateStateCallback<PropertyInitMapBase>

    • Used to assign inputs to the given element. This can be externally called as an API for setting inputs on an element reference, though this is discouraged. Inputs should typically be called using the .assign() method on an element definition inside of an HTML template.

      Parameters

      • inputs: EmptyObject extends Required<Inputs> ? never : Partial<Inputs>

      Returns void

    rendering

    • Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

      Returns unknown

    styles

    styles: CSSResult

    Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

    Note on Content Security Policy:

    Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

    To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

    <script>
      // Generated and unique per request:
      window.litNonce = 'a1b2c3d4';
    </script>

    Settings

    Member Visibility

    On This Page

    MISSING CATEGORY
    rendering
    styles