element-vir - v27.0.2
    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
    connectedCallback
    constructor _internalRenderCount _lastRenderedProps _lastRenderError definition hasConnectedInputAttributeObserver inputAttributeObserver instanceInputs instanceState observablePropertyListenerMap assign assignedInputs cssVars elementOptions events hostClasses init InputsType render slotNames StateType tagName testIds UpdateStateType assignInputs destroy
    render
    styles

    • Invoked when the component is added to the document's DOM.

      In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

      connectedCallback() {
        super.connectedCallback();
        addEventListener('keydown', this._handleKeydown);
      }

      Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

      Returns void

    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.

    hasConnectedInputAttributeObserver: boolean = false
    inputAttributeObserver: MutationObserver = ...
    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}`,
                CssVarValueInit
                | CssPropertyDefinition
                | SingleCssVarDefinition,
            >,
        >,
    >
    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<{ [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

    • 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: 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
    lifecycle
    MISSING CATEGORY
    rendering
    styles