maquette
    Preparing search index...

    Interface VNodeProperties

    Object containing attributes, properties, event handlers and more that can be put on DOM nodes.

    For your convenience, all common attributes, properties and event handlers are listed here and are type-checked when using Typescript.

    interface VNodeProperties {
        accessKey?: string;
        action?: string;
        alt?: string;
        autocomplete?: string;
        bind?: unknown;
        checked?: boolean;
        class?: string;
        classes?: { [index: string]: undefined | null | boolean };
        className?: "Hint: do not use `className`, use `class` instead";
        disabled?: boolean;
        draggable?: boolean;
        encoding?: string;
        enctype?: string;
        enterAnimation?: (element: Element, properties?: VNodeProperties) => void;
        href?: string;
        id?: string;
        innerHTML?: string;
        is?: string;
        key?: unknown;
        method?: string;
        name?: string;
        on?: {
            [eventName: string]:
                | EventHandler
                | {
                    listener: EventHandler;
                    options: { capture?: boolean; once?: boolean; passive?: boolean };
                };
        };
        onCapture?: { [eventName: string]: EventHandler };
        placeholder?: string;
        readOnly?: boolean;
        rel?: string;
        spellcheck?: boolean;
        src?: string;
        srcset?: string;
        styles?: Partial<CSSStyleDeclaration> | { [cssVariable: string]: string };
        tabIndex?: number;
        target?: string;
        title?: string;
        type?: string;
        value?: string;
        afterCreate(
            element: Element,
            projectionOptions: ProjectionOptions,
            vnodeSelector: string,
            properties: VNodeProperties,
            children: undefined | VNode[],
        ): void;
        afterRemoved(element: Element): void;
        afterUpdate(
            element: Element,
            projectionOptions: ProjectionOptions,
            vnodeSelector: string,
            properties: VNodeProperties,
            children: undefined | VNode[],
        ): void;
        exitAnimation(
            element: Element,
            removeElement: () => void,
            properties?: VNodeProperties,
        ): void;
        onblur(ev: FocusEvent): boolean | void;
        onchange(ev: Event): boolean | void;
        onclick(ev: MouseEvent): boolean | void;
        ondblclick(ev: MouseEvent): boolean | void;
        ondrag(ev: DragEvent): boolean | void;
        ondragend(ev: DragEvent): boolean | void;
        ondragenter(ev: DragEvent): boolean | void;
        ondragleave(ev: DragEvent): boolean | void;
        ondragover(ev: DragEvent): boolean | void;
        ondragstart(ev: DragEvent): boolean | void;
        ondrop(ev: DragEvent): boolean | void;
        onfocus(ev: FocusEvent): boolean | void;
        oninput(ev: Event): boolean | void;
        onkeydown(ev: KeyboardEvent): boolean | void;
        onkeypress(ev: KeyboardEvent): boolean | void;
        onkeyup(ev: KeyboardEvent): boolean | void;
        onload(ev: Event): boolean | void;
        onmousedown(ev: MouseEvent): boolean | void;
        onmouseenter(ev: MouseEvent): boolean | void;
        onmouseleave(ev: MouseEvent): boolean | void;
        onmousemove(ev: MouseEvent): boolean | void;
        onmouseout(ev: MouseEvent): boolean | void;
        onmouseover(ev: MouseEvent): boolean | void;
        onmouseup(ev: MouseEvent): boolean | void;
        onmousewheel(ev: WheelEvent): boolean | void;
        onpointercancel(ev: PointerEvent): boolean | void;
        onpointerdown(ev: PointerEvent): boolean | void;
        onpointerenter(ev: PointerEvent): boolean | void;
        onpointerleave(ev: PointerEvent): boolean | void;
        onpointermove(ev: PointerEvent): boolean | void;
        onpointerout(ev: PointerEvent): boolean | void;
        onpointerover(ev: PointerEvent): boolean | void;
        onpointerup(ev: PointerEvent): boolean | void;
        onscroll(ev: UIEvent): boolean | void;
        onsubmit(ev: Event): boolean | void;
        ontouchcancel(ev: TouchEvent): boolean | void;
        ontouchend(ev: TouchEvent): boolean | void;
        ontouchmove(ev: TouchEvent): boolean | void;
        ontouchstart(ev: TouchEvent): boolean | void;
        updateAnimation(
            element: Element,
            properties?: VNodeProperties,
            previousProperties?: VNodeProperties,
        ): void;
        readonly [index: string]: any;
    }

    Indexable

    • readonly [index: string]: any

      Everything that is not explicitly listed (properties and attributes that are either uncommon or custom).

    Index

    Properties

    accessKey?: string
    action?: string
    alt?: string
    autocomplete?: string
    bind?: unknown

    When specified, the event handlers will be invoked with 'this' pointing to the value. This is useful when using the prototype/class based implementation of MaquetteComponents.

    When no key is present, this object is also used to uniquely identify a DOM node.

    checked?: boolean
    class?: string
    classes?: { [index: string]: undefined | null | boolean }

    An object literal like {important:true} which allows css classes, like important to be added and removed dynamically.

    className?: "Hint: do not use `className`, use `class` instead"

    Do not use className, use class instead

    disabled?: boolean
    draggable?: boolean
    encoding?: string
    enctype?: string
    enterAnimation?: (element: Element, properties?: VNodeProperties) => void

    The animation to perform when this node is added to an already existing parent. More about animations.

    Type declaration

      • (element: Element, properties?: VNodeProperties): void
      • Parameters

        • element: Element

          Element that was just added to the DOM.

        • Optionalproperties: VNodeProperties

          The properties object that was supplied to the h method

        Returns void

    href?: string
    id?: string
    innerHTML?: string

    Puts a non-interactive string of html inside the DOM node.

    Note: if you use innerHTML, maquette cannot protect you from XSS vulnerabilities and you must make sure that the innerHTML value is safe.

    is?: string

    For custom elements

    key?: unknown

    Used to uniquely identify a DOM node among siblings. A key is required when there are more children with the same selector and these children are added or removed dynamically. NOTE: this does not have to be a string or number, a MaquetteComponent Object for instance is also common.

    method?: string
    name?: string
    on?: {
        [eventName: string]:
            | EventHandler
            | {
                listener: EventHandler;
                options: { capture?: boolean; once?: boolean; passive?: boolean };
            };
    }

    An object containing event handlers to attach using addEventListener. Note that projector.scheduleRender() is called automatically when these event handlers are invoked.

    onCapture?: { [eventName: string]: EventHandler }

    An object containing event handlers to attach using addEventListener. Note that projector.scheduleRender() is called automatically when these event handlers are invoked.

    placeholder?: string
    readOnly?: boolean
    rel?: string
    spellcheck?: boolean
    src?: string
    srcset?: string
    styles?: Partial<CSSStyleDeclaration> | { [cssVariable: string]: string }

    An object literal like {height:'100px'} which allows styles to be changed dynamically. All values must be strings.

    tabIndex?: number
    target?: string
    title?: string
    type?: string
    value?: string

    Methods

    • Callback that is executed after this node is added to the DOM. Child nodes and properties have already been applied.

      Parameters

      • element: Element

        The element that was added to the DOM.

      • projectionOptions: ProjectionOptions

        The projection options that were used, see createProjector.

      • vnodeSelector: string

        The selector passed to the h function.

      • properties: VNodeProperties

        The properties passed to the h function.

      • children: undefined | VNode[]

        The children that were created.

      Returns void

    • Callback that is called when a node has been removed from the tree. The callback is called during idle state or after a timeout (fallback). More info

      Parameters

      • element: Element

        The element that has been removed from the DOM.

      Returns void

    • Callback that is executed every time this node may have been updated. Child nodes and properties have already been updated.

      Parameters

      • element: Element

        The element that may have been updated in the DOM.

      • projectionOptions: ProjectionOptions

        The projection options that were used, see createProjector.

      • vnodeSelector: string

        The selector passed to the h function.

      • properties: VNodeProperties

        The properties passed to the h function.

      • children: undefined | VNode[]

        The children for this node.

      Returns void

    • The animation to perform when this node is removed while its parent remains.

      Parameters

      • element: Element

        Element that ought to be removed from to the DOM.

      • removeElement: () => void

        Function that removes the element from the DOM. This argument is provided purely for convenience. You may use this function to remove the element when the animation is done.

      • Optionalproperties: VNodeProperties

        The properties object that was supplied to the h method that rendered this VNode the previous time.

      Returns void

    • Parameters

      • ev: FocusEvent

      Returns boolean | void

    • Parameters

      • ev: Event

      Returns boolean | void

    • Parameters

      • ev: MouseEvent

      Returns boolean | void

    • Parameters

      • ev: MouseEvent

      Returns boolean | void

    • Parameters

      • ev: DragEvent

      Returns boolean | void

    • Parameters

      • ev: DragEvent

      Returns boolean | void

    • Parameters

      • ev: DragEvent

      Returns boolean | void

    • Parameters

      • ev: DragEvent

      Returns boolean | void

    • Parameters

      • ev: DragEvent

      Returns boolean | void

    • Parameters

      • ev: DragEvent

      Returns boolean | void

    • Parameters

      • ev: DragEvent

      Returns boolean | void

    • Parameters

      • ev: FocusEvent

      Returns boolean | void

    • Parameters

      • ev: Event

      Returns boolean | void

    • Parameters

      • ev: KeyboardEvent

      Returns boolean | void

    • Parameters

      • ev: KeyboardEvent

      Returns boolean | void

    • Parameters

      • ev: KeyboardEvent

      Returns boolean | void

    • Parameters

      • ev: Event

      Returns boolean | void

    • Parameters

      • ev: MouseEvent

      Returns boolean | void

    • Parameters

      • ev: MouseEvent

      Returns boolean | void

    • Parameters

      • ev: MouseEvent

      Returns boolean | void

    • Parameters

      • ev: MouseEvent

      Returns boolean | void

    • Parameters

      • ev: MouseEvent

      Returns boolean | void

    • Parameters

      • ev: MouseEvent

      Returns boolean | void

    • Parameters

      • ev: MouseEvent

      Returns boolean | void

    • Parameters

      • ev: WheelEvent

      Returns boolean | void

    • Parameters

      • ev: PointerEvent

      Returns boolean | void

    • Parameters

      • ev: PointerEvent

      Returns boolean | void

    • Parameters

      • ev: PointerEvent

      Returns boolean | void

    • Parameters

      • ev: PointerEvent

      Returns boolean | void

    • Parameters

      • ev: PointerEvent

      Returns boolean | void

    • Parameters

      • ev: PointerEvent

      Returns boolean | void

    • Parameters

      • ev: PointerEvent

      Returns boolean | void

    • Parameters

      • ev: PointerEvent

      Returns boolean | void

    • Parameters

      • ev: UIEvent

      Returns boolean | void

    • Parameters

      • ev: Event

      Returns boolean | void

    • Parameters

      • ev: TouchEvent

      Returns boolean | void

    • Parameters

      • ev: TouchEvent

      Returns boolean | void

    • Parameters

      • ev: TouchEvent

      Returns boolean | void

    • Parameters

      • ev: TouchEvent

      Returns boolean | void

    • The animation to perform when the properties of this node change. This also includes attributes, styles, css classes. This callback is also invoked when node contains only text and that text changes. More about animations.

      Parameters

      • element: Element

        Element that was modified in the DOM.

      • Optionalproperties: VNodeProperties

        The last properties object that was supplied to the h method

      • OptionalpreviousProperties: VNodeProperties

        The previous properties object that was supplied to the h method

      Returns void