LitElement

属性が変更されたときにプロパティ値を同期します。

パラメータ

name

string

_old

null | string

value

null | string

詳細

具体的には、属性が設定されると、対応するプロパティが設定されます。このコールバックを実装する必要はほとんどありません。このメソッドをオーバーライドする場合は、super.attributeChangedCallback(name, _old, value) を呼び出す必要があります。attributeChangedCallback の詳細については、MDN の ライフサイクルコールバックの使用 を参照してください。

登録されたプロパティに対応する属性のリストを返します。

要素の反応型更新サイクルに参加する ReactiveController を登録します。要素は、ライフサイクルコールバック中に登録されたコントローラーを自動的に呼び出します。

パラメータ

controller

ReactiveController

詳細

addController() が呼び出されたときに要素が接続されている場合、コントローラーの hostConnected() コールバックがすぐに呼び出されます。

要素から ReactiveController を削除します。

パラメータ

controller

ReactiveController

このクラスの特定の警告カテゴリを無効にします。

詳細

このメソッドは開発ビルドでのみ存在するため、次のようなガードを使用してアクセスする必要があります。

// Disable for all ReactiveElement subclasses
ReactiveElement.disableWarning?.('migration');
// Disable for only MyElement and subclasses
MyElement.disableWarning?.('migration');

このクラスの有効になっているすべての警告カテゴリを読み取るか設定します。

詳細

このプロパティは開発ビルドでのみ使用されます。

このクラスの特定の警告カテゴリを有効にします。

詳細

このメソッドは開発ビルドでのみ存在するため、次のようなガードを使用してアクセスする必要があります。

// Enable for all ReactiveElement subclasses
ReactiveElement.enableWarning?.('migration');
// Enable for only MyElement and subclasses
MyElement.enableWarning?.('migration');

コンポーネントがドキュメントの DOM に追加されると呼び出されます。

詳細

connectedCallback() 内では、要素がドキュメントに接続されている場合にのみ実行されるタスクを設定する必要があります。これらで最も一般的なのは、要素の外部にあるノードへのイベントリスナーを追加することです（ウィンドウに追加されたキーダウンイベントハンドラーなど）。

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

通常、connectedCallback() 内で行われることはすべて、要素が切断されると disconnectedCallback() 内で元に戻される必要があります。

コンポーネントがドキュメントの DOM から削除されると呼び出されます。

詳細

このコールバックは、要素が使用されなくなる可能性があることを要素に通知する主要な信号です。disconnectedCallback() では、要素への参照（要素の外部にあるノードに追加されたイベントリスナーなど）が保持されていないことを確認し、ガベージコレクションされるようにする必要があります。

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

要素は、切断された後に再接続される可能性があります。

インスタンスの構築中に呼び出されるイニシャライザー関数をクラスに追加します。

パラメータ

initializer

Initializer

詳細

これは、ReactiveElement サブクラスに対して実行されるコード（デコレーターなど）で、インスタンスごとに作業を実行する必要がある場合（ReactiveController を設定する場合など）に役立ちます。

const myDecorator = (target: typeof ReactiveElement, key: string) => {
  target.addInitializer((instance: ReactiveElement) => {
    // This is run during construction of the element
    new MyController(instance);
  });
}

フィールドをデコレートすると、各インスタンスでコントローラーを追加するイニシャライザーが実行されます。

class MyElement extends LitElement {
  @myDecorator foo;
}

イニシャライザーはコンストラクターごとに保存されます。サブクラスにイニシャライザーを追加しても、スーパークラスには追加されません。イニシャライザーはコンストラクター内で実行されるため、スーパークラスから始めてインスタンスのクラスまで、クラス階層の順に実行されます。

登録されたプロパティのアクセスを取得し、要素のスタイリングを設定し、スーパークラスもすべて最終化されていることを確認します。要素が最終化された場合は true を返します。

このクラスが finalized としてマークされていることを確認します。これは最適化であり、不要な finalize 処理が実行されないようにします。

詳細

このプロパティ名は文字列であることに注意してください。これは、Closure JS Compiler の最適化を壊さないようにするためです。詳細については、@lit/reactive-element を参照してください。

如果元素原型上不存在属性访问器，则创建一个属性访问器，并为该属性存储一个具有给定选项的PropertyDeclaration。 属性设置器调用属性的hasChanged 属性选项，或使用严格的身份检查来确定是否请求更新。

パラメータ

name

PropertyKey

options?

PropertyDeclaration<unknown, unknown>

詳細

此方法可以被重写以自定义属性；但是，在这样做的时候，重要的是要调用super.createProperty以确保属性被正确设置。 此方法在内部调用getPropertyDescriptor以获取要安装的描述符。 要自定义属性在获取或设置时的行为，请重写getPropertyDescriptor。 要自定义属性的选项，请像这样实现createProperty

static createProperty(name, options) {
  options = Object.assign(options, {myOption: true});
  super.createProperty(name, options);
}

所有元素属性的记忆列表，包括任何超类属性。 在用户子类完成类时延迟创建。

返回要在给定命名属性上定义的属性描述符。 如果没有返回描述符，则该属性将不会成为访问器。 例如，

パラメータ

name

PropertyKey

key

string | symbol

options

PropertyDeclaration<unknown, unknown>

詳細

class MyElement extends LitElement {
  static getPropertyDescriptor(name, key, options) {
    const defaultDescriptor =
        super.getPropertyDescriptor(name, key, options);
    const setter = defaultDescriptor.set;
    return {
      get: defaultDescriptor.get,
      set(value) {
        setter.call(this, value);
        // custom action.
      },
      configurable: true,
      enumerable: true
    }
  }
}

返回与给定属性关联的属性选项。 这些选项通过PropertyDeclaration在properties对象或@property装饰器中定义，并在createProperty(...)中注册。

パラメータ

name

PropertyKey

詳細

注意，此方法应被视为“最终”方法，不应被重写。 要自定义给定属性的选项，请重写createProperty.

用户提供的对象，将属性名称映射到包含用于配置反应式属性的选项的PropertyDeclaration对象。 当设置反应式属性时，元素将更新并渲染。

詳細

默认情况下，属性是公共字段，因此，它们应被视为主要由元素用户设置，无论是通过属性还是属性本身。 通常，元素更改的属性应该是私有或受保护的字段，并且应该使用state: true选项。 标记为state的属性不会从相应的属性中反映出来。 但是，有时元素代码确实需要设置公共属性。 这通常应该只在响应用户交互时进行，并且应该触发一个事件来通知用户；例如，复选框在被点击时设置其checked属性并触发一个changed事件。 对公共属性的变异通常不应该对非原始类型（对象或数组）属性进行。 在其他情况下，当元素需要管理状态时，应该使用带有state: true选项的私有属性集。 当需要时，状态属性可以通过公共属性初始化，以促进复杂的交互。

在每次更新时调用以执行渲染任务。 此方法可以返回任何可由 lit-html 的 ChildPart 渲染的值 - 通常是 TemplateResult。 在此方法中设置属性 *不会* 触发元素更新。

应渲染元素 DOM 的节点或 ShadowRoot。 默认值为一个开放的 shadowRoot。

调用 attachShadow 时使用的选项。 设置此属性以自定义 shadowRoot 的选项；例如，要创建一个封闭的 shadowRoot：{mode: 'closed'}。

詳細

注意，这些选项在createRenderRoot中使用。 如果此方法被自定义，则应尽可能尊重选项。

所有元素样式的记忆列表。 在用户子类完成类时延迟创建。

获取用户通过static styles属性提供的样式，并返回要应用于元素的样式数组。 重写此方法以集成到样式管理系统中。

パラメータ

styles?

CSSResultGroup

詳細

样式被去重，保留列表中的最后一个实例。 这是一种性能优化，可以避免重复的样式，特别是当通过子类化进行组合时。 保留最后一个项目是为了尝试保留级联顺序，假设最后添加的样式最重要的是覆盖之前的样式。

要应用于元素的样式数组。 样式应使用css标签函数定义，通过可构造的样式表定义，或从本机 CSS 模块脚本导入。

詳細

关于内容安全策略的说明：当浏览器不支持采用样式表时，元素样式使用<style>标签实现。 要使用 style-src CSP 指令使用此类<style>标签，style-src 值必须包含“unsafe-inline”或nonce-<base64-value>，其中<base64-value>被服务器生成的 nonce 替换。 要提供一个 nonce 用于在生成的<style>元素上使用，在加载应用程序代码之前，在页面的 HTML 中将window.litNonce设置为服务器生成的 nonce

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

注意，此方法应被视为最终方法，不应被重写。 它被重写到元素实例上，使用一个触发第一次更新的函数。

パラメータ

_requestedUpdate

boolean

当元素第一次更新时调用。 实现此方法以在更新后对元素执行一次性工作。

パラメータ

_changedProperties

Map<PropertyKey, unknown> | PropertyValueMap<any>

包含更改属性及其旧值的映射

詳細

firstUpdated() {
  this.renderRoot.getElementById('my-text-area').focus();
}

在此方法中设置属性将触发元素在此更新周期完成后再次更新。

updateComplete promise 的重写点。

詳細

由于 TypeScript 的限制，直接覆盖 `updateComplete` getter 不安全。这意味着当目标语言为 ES5 时，无法调用超类 getter（例如 `super.updateComplete.then(...)`）（https://github.com/microsoft/TypeScript/issues/338）。应该改为覆盖此方法。例如

class MyElement extends LitElement {
  override async getUpdateComplete() {
    const result = await super.getUpdateComplete();
    await this._myChild.updateComplete;
    return result;
  }
}

在第一次更新后设置为 `true`。元素代码在元素 `hasUpdated` 之前不能假定 `renderRoot` 存在。

如果由于调用 `requestUpdate()` 而存在待处理更新，则为真。应该只读。

执行元素更新。注意，如果更新期间抛出异常，则不会调用 `firstUpdated` 和 `updated`。

詳細

调用 `performUpdate()` 以立即处理待处理更新。这通常不需要，但可以在需要同步更新的极少数情况下执行。注意：为了确保 `performUpdate()` 同步完成待处理更新，它不应该被覆盖。在 LitElement 2.x 中，建议覆盖 `performUpdate()` 以定制更新调度。现在应该改为覆盖 `scheduleUpdate()`。为了向后兼容 LitElement 2.x，通过 `performUpdate()` 调度更新仍然有效，但会使调用 `performUpdate()` 以同步处理更新变得困难。

请求异步处理的更新。当元素应该基于某些状态更新（而不是通过设置反应式属性触发）时，应该调用此方法。在这种情况下，不传递参数。当手动实现属性 setter 时，也应该调用此方法。在这种情况下，传递属性 `name` 和 `oldValue` 以确保遵守任何配置的属性选项。

パラメータ

name?

PropertyKey

请求属性的名称

oldValue?

unknown

请求属性的旧值

options?

PropertyDeclaration<unknown, unknown>

要使用而不是先前配置选项的属性选项

调度元素更新。您可以覆盖此方法以通过返回 Promise 来更改更新的时机。更新将等待返回的 Promise，您应该解析 Promise 以允许更新继续。如果覆盖了此方法，则必须调用 `super.scheduleUpdate()`。

詳細

例如，要调度在下一帧之前发生的更新

override protected async scheduleUpdate(): Promise<unknown> {
  await new Promise((resolve) => requestAnimationFrame(() => resolve()));
  super.scheduleUpdate();
}

控制元素请求更新时是否应该调用 `update()`。默认情况下，此方法始终返回 `true`，但这可以自定义以控制何时更新。

パラメータ

_changedProperties

Map<PropertyKey, unknown> | PropertyValueMap<any>

包含更改属性及其旧值的映射

更新元素。此方法将属性值反映到属性，并调用 `render` 通过 lit-html 渲染 DOM。在此方法内部设置属性不会触发另一次更新。

パラメータ

changedProperties

Map<PropertyKey, unknown> | PropertyValueMap<any>

包含更改属性及其旧值的映射

返回一个 Promise，该 Promise 在元素完成更新时解析。Promise 值是一个布尔值，如果元素在没有触发另一次更新的情况下完成更新，则为 `true`。如果在 `updated()` 内部设置了属性，则 Promise 结果为 `false`。如果 Promise 被拒绝，则在更新期间抛出了异常。

詳細

要等待额外的异步工作，请覆盖 `getUpdateComplete` 方法。例如，在实现此 Promise 之前，有时需要等待渲染的元素。为此，首先等待 `super.getUpdateComplete()`，然后等待任何后续状态。

每当元素更新时调用。实现以通过 DOM API 执行更新后任务，例如聚焦元素。

パラメータ

_changedProperties

Map<PropertyKey, unknown> | PropertyValueMap<any>

包含更改属性及其旧值的映射

詳細

在此方法中设置属性将触发元素在此更新周期完成后再次更新。

在 `update()` 之前调用，以计算更新过程中需要的的值。

パラメータ

_changedProperties

Map<PropertyKey, unknown> | PropertyValueMap<any>

詳細

实现 `willUpdate` 以计算依赖于其他属性并在更新过程的其余部分中使用的属性值。

willUpdate(changedProperties) {
  // only need to check changed properties for an expensive computation.
  if (changedProperties.has('firstName') || changedProperties.has('lastName')) {
    this.sha = computeSHA(`${this.firstName} ${this.lastName}`);
  }
}
render() {
  return html`SHA: ${this.sha}`;
}

用于克隆模板的节点（`importNode` 将在此节点上调用）。这控制渲染的 DOM 的 `ownerDocument`，以及任何继承的上下文。默认为全局 `document`。

一个用作事件侦听器 `this` 值的对象。通常将此设置为渲染模板的主机组件很有用。

要渲染的顶层部分的初始连接状态。如果没有设置 `isConnected` 选项，则默认情况下将连接 `AsyncDirective`。如果初始渲染发生在断开的树中，并且 `AsyncDirective` 应该为它们的初始渲染看到 `isConnected === false`，则设置为 `false`。必须使用 `part.setConnected()` 方法在初始渲染之后更改部分的连接状态。

在容器中渲染内容之前的 DOM 节点。