Palette
    Preparing search index...

    Interface ComponentShorthand<StateShape>

    interface ComponentShorthand<StateShape extends object = {}> {
        afterUpdate?: (
            this: Component<StateShape>,
            previousAttributes: AttributeMap,
        ) => void;
        beforeUpdate?: (this: Component<StateShape>) => void;
        computedProperties?: ComputedProperties<StateShape>;
        finalize?: (this: Component<StateShape>) => void;
        initialState?: StateInitializer<StateShape>;
        liveAttributes?: LiveAttributes<StateShape>;
        onError?: (this: Component<StateShape>, error: unknown) => void;
        script?: (this: Component<StateShape>) => void | VoidFunction;
        shadowRootMode?: "closed" | "open";
        styles?: ComponentStyles;
        template?: HTMLTemplateElement;
    }

    Type Parameters

    • StateShape extends object = {}
    Index

    Properties

    afterUpdate? beforeUpdate? computedProperties? finalize? initialState? liveAttributes? onError? script? shadowRootMode? styles? template?

    Properties

    afterUpdate?: (
        this: Component<StateShape>,
        previousAttributes: AttributeMap,
    ) => void

    Called immediately after each template update

    beforeUpdate?: (this: Component<StateShape>) => void

    Called immediately before each template update

    computedProperties?: ComputedProperties<StateShape>

    An object or function returning an object which populates the data values in the templating engine. Such values are accessed using the * notation.

    finalize?: (this: Component<StateShape>) => void

    Called as the final lifecycle method at the end of the unmounting process.

    Content has been removed from the DOM and the component is no longer considered mounted when this function runs.

    Use this for final cleanup tasks and freeing resources.

    initialState?: StateInitializer<StateShape>

    The initial state for this Component's reactive internal state, if any.

    liveAttributes?: LiveAttributes<StateShape>

    Declaration of attribute behaviors during updates.

    onError?: (this: Component<StateShape>, error: unknown) => void

    If defined, receives errors caught during the lifecycle methods of this component and it's children. If not defined, this component will instead throw errors as they are found.

    If the error cannot be handled, onError() should re-throw it for a higher up component to evaluate.

    To display an error message while removing an erroring component from the DOM, use this.replaceWith() and a newly constructed placeholder element.

    Recovering from errors or displaying a fallback

    onError(error) {
      // Handle known errors
      if (error.message = "Invalid Input") {
        this.state.input = "";
        return;
      }

      // Display a fallback banner
      const banner = document.createElement("div");
      banner.textContent = "An unexpected error done did";
      this.replaceWith(banner);
    }
    script?: (this: Component<StateShape>) => void | VoidFunction

    Initialization scripting for this Component

    shadowRootMode?: "closed" | "open"

    The mode for this Component's ShadowRoot.

    • "open" allows JS access to the children of this component
    • "closed" (default) disallows internal JS access
    styles?: ComponentStyles

    A CSSStyleSheet array to adopt to the element's shadow DOM

    template?: HTMLTemplateElement

    An HTML Template element for this element to use.

    Settings

    Member Visibility

    On This Page

    Properties