为什么有个“.”在点亮样本的选项中？

Question

lit在下面URL介绍了一个“变化检测”的例子。 https://lit.dev/playground/#sample=examples/properties-has-changed

为什么有个“.”在 my-element.ts?

的第 16 行指定“date-display”选项时在“date”的开头

import { LitElement, html} from "lit";
import {customElement, property} from 'lit/decorators.js';
import {localDateFromUTC} from './date-utils.js';
import './date-display.js';

@customElement('my-element')
class MyElement extends LitElement {

  @property() date?: Date;

  render() {
    return html`
      <p>Choose a date:
      <input type="date" @change=${this._dateChanged}></p>
      <p><button @click=${this._chooseToday}>Choose Today</button></p>
      <p>Date chosen: <date-display .date=${this.date}></date-display></p>
    `;
  }

  _dateChanged(e: Event) {
    const utcDate = (e.target as HTMLInputElement).valueAsDate;
    if (utcDate) {
      this.date = localDateFromUTC(utcDate);
    }
  }

  _chooseToday() {
    this.date = new Date();
  }
}

Answer 1

Lit 使用前缀来表示 expression in a component's template. The . prefix denotes a property expression; without the prefix it would be an attribute expression 的类型。使用属性表达式可以非常轻松方便地将任何 JS 对象传递给子元素（在本例中为 Date 对象）。

使用 HTML 属性时，您需要注意它们始终是字符串。 JS 数据必须在父元素上转换为字符串，然后可能在子元素上转换回相应的 JS 类型。属性表达式不会执行这样的转换，因为数据停留在“JS land”。

那么，为什么不总是使用属性表达式呢？我马上想到两个例子：

要使属性表达式起作用，您需要了解子元素的实现细节，即它具有相应的 JS 属性。（如果您在单个项目中处理自己的基于 Lit 的元素，这不是问题。）
如果您想根据属性应用选择器（例如，用于样式 my-button[disabled] { /* CSS ... /* } 或使用 querySelector）。

为什么有个“.”在点亮样本的选项中？

Why is there an "." In the option in the lit sample?

lit