Options
All
  • Public
  • Public/Protected
  • All
Menu

Module "lit-html"

Main lit-html module.

Main exports:

Index

Type aliases

DirectiveFn

DirectiveFn: (part: Part) => void

Type declaration

    • (part: Part): void
    • Parameters

      Returns void

Variables

Const defaultTemplateProcessor

defaultTemplateProcessor: DefaultTemplateProcessor = new DefaultTemplateProcessor()

Const noChange

noChange: {}

A sentinel value that signals that a value was handled by a directive and should not be written to the DOM.

Type declaration

Const nothing

nothing: {}

A sentinel value that signals a NodePart to fully clear its content.

Type declaration

Const parts

parts: WeakMap<Node, NodePart> = new WeakMap<Node, NodePart>()

Const templateCaches

templateCaches: Map<string, TemplateCache> = new Map<string, TemplateCache>()

Functions

Const createMarker

  • createMarker(): Comment

Const directive

  • directive<F>(f: F): F
  • Brands a function as a directive factory function so that lit-html will call the function during template rendering, rather than passing as a value.

    A directive is a function that takes a Part as an argument. It has the signature: (part: Part) => void.

    A directive factory is a function that takes arguments for data and configuration and returns a directive. Users of directive usually refer to the directive factory as the directive. For example, "The repeat directive".

    Usually a template author will invoke a directive factory in their template with relevant arguments, which will then return a directive function.

    Here's an example of using the repeat() directive factory that takes an array and a function to render an item:

    html`<ul><${repeat(items, (item) => html`<li>${item}</li>`)}</ul>`

    When repeat is invoked, it returns a directive function that closes over items and the template function. When the outer template is rendered, the return directive function is called with the Part for the expression. repeat then performs it's custom logic to render multiple items.

    Type parameters

    • F: DirectiveFactory

    Parameters

    • f: F

      The directive factory function. Must be a function that returns a function of the signature (part: Part) => void. The returned function will be called with the part object.

    Returns F

Const html

  • html(strings: TemplateStringsArray, ...values: unknown[]): TemplateResult
  • Interprets a template literal as an HTML template that can efficiently render to and update a container.

    Parameters

    • strings: TemplateStringsArray
    • Rest ...values: unknown[]

    Returns TemplateResult

Const isDirective

  • isDirective(o: unknown): o is DirectiveFn

Const isIterable

  • isIterable(value: unknown): value is Iterable<unknown>
  • Parameters

    • value: unknown

    Returns value is Iterable<unknown>

Const isPrimitive

  • isPrimitive(value: unknown): value is Primitive
  • Parameters

    • value: unknown

    Returns value is Primitive

Const isTemplatePartActive

  • isTemplatePartActive(part: TemplatePart): boolean

Const removeNodes

  • removeNodes(container: Node, start: Node | null, end?: Node | null): void
  • Removes nodes, starting from start (inclusive) to end (exclusive), from container.

    Parameters

    • container: Node
    • start: Node | null
    • Default value end: Node | null = null

    Returns void

Const render

  • render(result: unknown, container: Element | DocumentFragment, options?: Partial<RenderOptions>): void
  • Renders a template result or other value to a container.

    To update a container with new values, reevaluate the template literal and call render with the new result.

    Parameters

    • result: unknown

      Any value renderable by NodePart - typically a TemplateResult created by evaluating a template tag like html or svg.

    • container: Element | DocumentFragment

      A DOM parent to render to. The entire contents are either replaced, or efficiently updated if the same result type was previous rendered there.

    • Optional options: Partial<RenderOptions>

      RenderOptions for the entire render tree rendered to this container. Render options must not change between renders to the same container, as those changes will not effect previously rendered DOM.

    Returns void

Const reparentNodes

  • reparentNodes(container: Node, start: Node | null, end?: Node | null, before?: Node | null): void
  • Reparents nodes, starting from start (inclusive) to end (exclusive), into another container (could be the same container), before before. If before is null, it appends the nodes to the container.

    Parameters

    • container: Node
    • start: Node | null
    • Default value end: Node | null = null
    • Default value before: Node | null = null

    Returns void

Const svg

  • Interprets a template literal as an SVG template that can efficiently render to and update a container.

    Parameters

    • strings: TemplateStringsArray
    • Rest ...values: unknown[]

    Returns SVGTemplateResult

templateFactory

Generated using TypeDoc