Palette
    Preparing search index...

    Class Component<StateShape>Abstract

    The Component class extends the base HTMLElement class to provide an ergonomic way to design and develop Web Components with reactive state, managed attributes, and dynamic templating.

    Type Parameters

    • StateShape extends object = {}

    Hierarchy

    • HTMLElement
      • Component
    Index

    Constructors

    Properties

    root: ShadowRoot
    template: Template
    observedAttributes: string[] = []

    Attributes to watch for changes for updates.

    rootMode: RootMode = RootMode.Closed

    The mode for this Component's ShadowRoot.

    MDN: https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode

    style: string | CSSStyleSheet | CSSStyleSheet[] = []

    Styles to encapsulate to this component's root.

    tagName: string = ""

    The HTML tag name to use for this Component

    template: HTMLTemplateElement | Template = BLANK_TEMPLATE

    An HTML Template element for this element to use.

    Accessors

    • get isMounted(): boolean

      Returns boolean

    • get state(): StateShape

      Accessor for live reactive state.

      For the full state manipulation API, use getState

      Returns StateShape

    • set state(newState: StateShape | State<StateShape>): void

      Replace the current state with a new value or adopt a whole different State instance

      Parameters

      Returns void

    Methods

    • Called immediately after each template update

      Parameters

      • previousAttributes: Record<string, string | null>

      Returns void

    • Parameters

      • name: string
      • _: string | null
      • newValue: string | null

      Returns void

      Use beforeUpdate and afterUpdate instead

    • Called immediately before each template update

      Parameters

      • changedAttributes: Record<string, string | null>

      Returns void

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

      Parameters

      Returns Record<string, unknown>

    • Returns void

      Use script instead

    • Returns void

      use finalize

    • Publish a CustomEvent with the provided name and options.

      Default options are:

      {
      bubbles: true,
      cancelable: true,
      composed: true,
      detail: undefined,
      }

      Type Parameters

      • T

      Parameters

      • name: string

        The name of the custom event to publish

      • options: CustomEventInit<T>

        Options to configure the custom event

      Returns boolean

    • Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.

      Parameters

      • event: Event

      Returns boolean

    • Final lifecycle method called at the end of the unmounting process.

      Returns void

    • Access the full State instance for this Component.

      Returns State<StateShape>

      Calling this method on a component which is not using reactive state will result in an error being thrown.

    • Listen for events on a child element based on the provided query

      Type Parameters

      • E extends keyof GlobalEventHandlersEventMap

      Parameters

      Returns VoidFunction

      A function which removes the listener when called

      Event listeners created with this method are automatically cleaned up when the component unmounts. You can manually remove the listener during the component's lifecycle by calling the returned function if need be.

    • Listen for events on a child element based on the provided component's tag

      Type Parameters

      • E extends keyof GlobalEventHandlersEventMap

      Parameters

      • target: {
            observedAttributes: string[];
            prototype: Component<any>;
            rootMode: RootMode;
            style: string | CSSStyleSheet | CSSStyleSheet[];
            tagName: string;
            template: HTMLTemplateElement | Template;
            isComponent(value: unknown): value is Component<{}>;
            isComponentClass(value: unknown): value is typeof Component;
            readComponentTagName(componentClass: typeof Component): string;
            new (): Component<any>;
        }
        • observedAttributes: string[]

          Attributes to watch for changes for updates.

        • prototype: Component<any>
        • rootMode: RootMode

          The mode for this Component's ShadowRoot.

          MDN: https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode

        • style: string | CSSStyleSheet | CSSStyleSheet[]

          Styles to encapsulate to this component's root.

        • tagName: string

          The HTML tag name to use for this Component

        • template: HTMLTemplateElement | Template

          An HTML Template element for this element to use.

        • isComponent: function
          • Check if a value is a Component instance

            Parameters

            • value: unknown

            Returns value is Component<{}>

        • isComponentClass: function
          • Check if a value is a Component class

            Parameters

            • value: unknown

            Returns value is typeof Component

        • readComponentTagName: function
          • Parameters

            Returns string

      • eventName: E
      • eventHandler: EventHandler<E>

      Returns VoidFunction

      A function which removes the listener when called

      Event listeners created with this method are automatically cleaned up when the component unmounts. You can manually remove the listener during the component's lifecycle by calling the returned function if need be.

    • Listen for events on the host element

      Type Parameters

      • E extends keyof GlobalEventHandlersEventMap

      Parameters

      Returns VoidFunction

      A function which removes the listener when called

      Event listeners created with this method are automatically cleaned up when the component unmounts. You can manually remove the listener during the component's lifecycle by calling the returned function if need be.

    • Listen for events on the host element

      Type Parameters

      • E extends keyof GlobalEventHandlersEventMap

      Parameters

      Returns VoidFunction

      A function which removes the listener when called

      Event listeners created with this method are automatically cleaned up when the component unmounts. You can manually remove the listener during the component's lifecycle by calling the returned function if need be.

    • Handle errors thrown during lifecycle methods of this component or any unhandled errors from child components.

      Parameters

      • error: unknown

      Returns void

    • Returns a reference to the HTML Element with the provided ID within the shadow root of this component.

      Throws an error if no element with the provided ID is found

      Type Parameters

      • E extends HTMLElement

      Parameters

      • id: string

      Returns E

    • Manually schedule a render to occur, optionally providing a callback to invoke after the render completes.

      Returns void

      Calling render multiple times in the same event loop won't schedule multiple renders. Renders are scheduled to occur on the next animation frame.

    • Initialization lifecycle method. Main scripting and event listeners.

      Returns void | VoidFunction

      a function to handle cleanup tasks when the component unmounts

    • Serialize this element to a string

      Returns string

    • Check if a value is a Component instance

      Parameters

      • value: unknown

      Returns value is Component<{}>

    • Check if a value is a Component class

      Parameters

      • value: unknown

      Returns value is typeof Component

    • Parameters

      Returns string