装饰器

将装饰类定义为自定义元素的类装饰器工厂。

导入

import { customElement } from 'lit/decorators.js';

签名

customElement(tagName): (classOrDescriptor: ClassDescriptor | CustomElementClass) => any

参数

tagName

string

要定义的自定义元素的标签名称。

详情

@customElement('my-element')
class MyElement extends LitElement {
  render() {
    return html``;
  }
}

将事件侦听器选项添加到用作 lit-html 模板中事件侦听器的函数。

导入

import { eventOptions } from 'lit/decorators.js';

签名

eventOptions(options): (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => any

参数

options

AddEventListenerOptions

一个对象，指定事件侦听器选项，如 EventTarget#addEventListener 和 EventTarget#removeEventListener 所接受的。

一个属性装饰器，它创建一个反应式属性，该属性反映相应的属性值。当设置一个装饰的属性时，元素将更新并渲染。一个 PropertyDeclaration 可以选择性地提供以配置属性特性。

导入

import { property } from 'lit/decorators.js';

签名

property(options?): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any

参数

options?

PropertyDeclaration<unknown, unknown>

详情

此装饰器应该只用于公共字段。作为公共字段，属性应该被认为主要是由元素用户设置的，无论是通过属性还是属性本身。通常，由元素更改的属性应该是私有或受保护的字段，并且应该使用 state 装饰器。但是，有时元素代码确实需要设置一个公共属性。这通常应该只在响应用户交互时完成，并且应该触发一个事件来通知用户；例如，复选框在其单击时设置其 checked 属性并触发 changed 事件。对于非原始（对象或数组）属性，通常不应进行公共属性的变异。在元素需要管理状态的其他情况下，应该使用通过 state 装饰器装饰的私有属性。在需要时，状态属性可以通过公共属性初始化，以促进复杂的交互。

class MyElement {
  @property({ type: Boolean })
  clicked = false;
}

一个属性装饰器，它将类属性转换为 getter，该 getter 在元素的 renderRoot 上执行 querySelector。

导入

import { query } from 'lit/decorators.js';

签名

query(selector, cache?): (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => any

参数

selector

string

包含一个或多个要匹配的选择器的 DOMString。

cache?

boolean

一个可选的布尔值，当为真时，只执行一次 DOM 查询并缓存结果。

一个属性装饰器，它将类属性转换为 getter，该 getter 在元素的 renderRoot 上执行 querySelectorAll。

导入

import { queryAll } from 'lit/decorators.js';

签名

queryAll(selector): (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => any

参数

selector

string

包含一个或多个要匹配的选择器的 DOMString。

一个属性装饰器，它将类属性转换为 getter，该 getter 返回给定 slot 的 assignedElements。提供了一种声明性方式来使用 HTMLSlotElement.assignedElements。

导入

import { queryAssignedElements } from 'lit/decorators.js';

签名

queryAssignedElements(options?): (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => any

参数

options?

QueryAssignedElementsOptions

详情

可以传递一个可选的 QueryAssignedElementsOptions 对象。示例用法

class MyElement {
  @queryAssignedElements({ slot: 'list' })
  listItems!: Array<HTMLElement>;
  @queryAssignedElements()
  unnamedSlotEls!: Array<HTMLElement>;
  render() {
    return html`
      <slot name="list"></slot>
      <slot></slot>
    `;
  }
}

注意，此属性的类型应注释为 Array<HTMLElement>。

一个属性装饰器，它将类属性转换为 getter，该 getter 返回给定 slot 的 assignedNodes。

导入

import { queryAssignedNodes } from 'lit/decorators.js';

签名

queryAssignedNodes(options?): TSDecoratorReturnType

参数

options?

QueryAssignedNodesOptions

详情

可以传递一个可选的 QueryAssignedNodesOptions 对象。示例用法

class MyElement {
  @queryAssignedNodes({slot: 'list', flatten: true})
  listItems!: Array<Node>;
  render() {
    return html`
      <slot name="list"></slot>
    `;
  }
}

注意此属性的类型应注释为 Array<Node>。使用 queryAssignedElements 装饰器仅列出元素，并可以使用 CSS 选择器可选地筛选元素列表。

一个属性装饰器，它将类属性转换为 getter，该 getter 返回一个 promise，该 promise 解析为在元素的 updateComplete promise 解析后完成的元素 renderRoot 上的 querySelector 的结果。当查询的属性可能随着元素状态而变化时，可以使用此装饰器，而不是要求用户在访问属性之前等待 updateComplete。

导入

import { queryAsync } from 'lit/decorators.js';

签名

queryAsync(selector): (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => any

参数

selector

string

包含一个或多个要匹配的选择器的 DOMString。

声明一个私有或受保护的反应式属性，该属性在更改时仍然会触发元素的更新。它不会从相应的属性反射。

导入

import { state } from 'lit/decorators.js';

签名

state(options?): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any

参数

options?

InternalPropertyDeclaration<unknown>

详情

以这种方式声明的属性不能从 HTML 或 HTML 模板系统中使用，它们仅用于元素内部的属性。这些属性可能会被优化工具（如闭包编译器）重命名。

导入

import { InternalPropertyDeclaration } from 'lit/decorators.js';

用于 queryAssignedElements 装饰器的选项。扩展了可以传递到 HTMLSlotElement.assignedElements 中的选项。

导入

import { QueryAssignedElementsOptions } from 'lit/decorators.js';

用于 queryAssignedNodes 装饰器的选项。扩展了可以传递到 HTMLSlotElement.assignedNodes 中的选项。

导入

import { QueryAssignedNodesOptions } from 'lit/decorators.js';