现在已经定义了 dateConverter，接下来使用 dateConverter 来清理 date-display 的实现。

使用转换器

从 date-converter. 导入 dateConverter。
在 date 响应式属性选项中将 converter 设置为 dateConverter 的调用结果。
- 将 navigator.language 字符串作为参数传入。
通过移除 attribute: false 来启用 date 的特性转换。
通过设置 reflect: true 来启用属性反射回特性。

date-display.

import {dateConverter} from './date-converter.js';

export class DateDisplay extends LitElement {
  ...

  @property({converter: dateConverter(navigator.language), reflect: true})
  date = new Date();
  ...

import {dateConverter} from './date-converter.js';

export class DateDisplay extends LitElement {
  static properties = {
    date: {converter: dateConverter(navigator.language), reflect: true},
    dateStr: {type: String, attribute: 'date-str'},
  };
  ...

清理对 `dateStr` 的引用

Permalink to "清理对 dateStr 的引用"

移除 dateStr 属性。
删除 willUpdate 方法。（你不再需要将 dateStr 与 date 同步。）
更新 index.html，改为使用 date 特性。

date-display.

Permalink to "date-display."

export class DateDisplay extends LitElement {
  @property({converter: dateConverter})
  date = new Date();

  render() {
    return html`
      <p>The given date is: ${this.date.toLocaleDateString()}</p>
    `;
  }
}

export class DateDisplay extends LitElement {
  static properties = {
    date: {converter: dateConverter},
  };

  constructor() {
    super();
    this.date = new Date();
  }

  render() {
    return html`
      <p>The given date is: ${this.date.toLocaleDateString()}</p>
    `;
  }
}

index.html

Permalink to "index.html"

<date-display date="05/05/22"></date-display>

现在，date 特性可以正确地转换为 JavaScript Date 对象了！