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.

Hierarchy

  • VNodeProperties

Indexable

[index: string]: any

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
className?: "Hint: do not use `className`, use `class` instead"

Do not use className, use class instead

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

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

Type declaration

  • [index: string]: boolean | null | undefined
disabled?: boolean
draggable?: boolean
encoding?: string
enctype?: string
enterAnimation?: ((element: Element, properties?: VNodeProperties) => void)

Type declaration

    • (element: Element, properties?: VNodeProperties): void
    • The animation to perform when this node is added to an already existing parent. More about animations.

      Parameters

      • element: Element

        Element that was just added to the DOM.

      • Optional properties: 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.

Type declaration

  • [eventName: string]: EventHandler | {
        listener: EventHandler;
        options: {
            capture?: boolean;
            once?: boolean;
            passive?: boolean;
        };
    }
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.

Type declaration

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: 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: 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.

        • (): void
        • Returns void

    • Optional properties: 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.

    • Optional properties: VNodeProperties

      The last properties object that was supplied to the [[h]] method

    • Optional previousProperties: VNodeProperties

      The previous properties object that was supplied to the [[h]] method

    Returns void

Generated using TypeDoc