Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface ElementDecoratorOptions

Hierarchy

  • ElementDecoratorOptions

Index

Properties

Methods

Properties

Optional extends

extends: keyof HTMLElementTagNameMap

This option allows constructing the Customized built-in element. Customized built-in elements differ from regular custom elements in many ways. E.g., many native elements cannot be extended by creating Shadow Root on them; by default, LightDOM will be created for these elements.

To create a customized built-in element, you also have to extend a proper class (e.g. HTMLAnchorElement for <a>).

note

Do not forget that using a customized built-in element requires a polyfill for Safari that does not support this part of the specification.

@element('my-anchor', {extends: 'a'})
class MyAnchor extends HTMLAnchorElement {}

List of native elements allowed to create the Shadow Root
  • <article>
  • <aside>
  • <blockquote>
  • <body>
  • <div>
  • <footer>
  • <header>
  • <main>
  • <nav>
  • <p>
  • <section>
  • <span>

Optional lightDOM

lightDOM: undefined | false | true

If this option is enabled, the Light DOM will be used instead of the Shadow DOM; a result of the render function will be written directly to the element.

warning

Be careful, rendering to the Light DOM will erase any existing markup and make setting it from the outside buggy.

note

This option is enabled automatically if Shadow Root is not allowed for this element. See extends option.

Methods

Optional renderer

  • renderer(renderingResult: unknown, container: Element | DocumentFragment, context: unknown): void

  • This option defines the rendering function that applies result returned from the render function to the component body.

    If you omit this property, rendering won't ever happen on your element.

    Parameters

    • renderingResult: unknown

      a result returned by a render function.

    • container: Element | DocumentFragment

      a component root to which result should be applied. It can be either the component shadow root or a component itself if the lightDOM is enabled.

    • context: unknown

      a component instance; it can be used in specific cases like setting the eventContext of lit-html.

    Returns void

Optional scheduler

  • scheduler(task: function): Promise<void>

  • This option defines the function that schedules the rendering process. Since each component renders independently and synchronously, it requires a scheduling system to run the update at the right time and not freeze the user interface. Using this option you can specify your own scheduling function instead of the default one.

    By default, the schedule is used.

    Parameters

    • task: function

      a callback that will be run at the scheduled time.

        • (): void

        • Returns void

    Returns Promise<void>

Generated using TypeDoc