Lit 为基本类型（如数字和布尔值）提供了内置特性转换器。在这一步和接下来的一步中，你将使用内置特性转换器和一些命令式代码来通过标记设置 date 属性。

在这一步中，你将从一个 Lit 组件开始，该组件：

• 有一个 Date 类型的 date 响应式属性。
• 关闭了特性到属性的转换 {attribute: false}。
• 以可读的格式显示 date。

date 属性是通过 JavaScript 在 index.html 中设置的。 date 属性无法通过特性设置，因为 Lit 没有内置的特性转换器来将字符串日期转换为 Date 对象。

特性转换器告诉 Lit 如何将特性转换为属性，并且在响应式属性设置了 reflect: true 标志时，如何从属性转换回特性。

Lit 有多个内置特性转换器。你可以通过在声明响应式属性时设置 type 选项来选择使用哪个内置转换器。内置转换器包括：

• String （默认）
• Boolean
• Number
• Array
• Object

有关内置转换器的更多信息，请参阅使用默认转换器。

在这一步中，你将添加一个新的 dateStr 响应式属性，它接受一个可读的日期字符串，并且可以通过特性设置。（即 date-str="05/05/22"。）

• 声明一个 String 类型的 dateStr 响应式属性。
• 将 dateStr 的默认值设置为 date 的字符串表示。
• 将 dateStr 的特性设置为 date-str。

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

  @property({type: String, attribute: 'date-str'})
  dateStr = '';
  ...

export class DateDisplay extends LitElement {
  static properties = {
    date: {attribute: false},
    dateStr: {type: String, attribute: 'date-str'},
  };

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

现在设置 date-str 特性为 05/05/22 将会更新 dateStr 属性为 05/05/22，因为使用了内置的 String 特性转换器！遗憾的是，你不会看到输出有任何变化，因为 date 属性没有被更新。

在下一步中，你将修复这个问题。