Почему стоит знак "." В варианте в засвеченном образце?

Question

lit представляет пример «Обнаружения изменений» по следующему URL-адресу.https://lit.dev/playground/#sample=examples/properties-has-changed

Почему стоит "." в начале «date» при указании опции «date-display» в строке 16 my-element.ts?

      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 использует префиксы для обозначения типа выражения в шаблоне компонента . В .префикс обозначает выражение свойства; без префикса это было бы выражение атрибута . Использование выражения свойства позволяет очень легко и удобно передавать любой JS-объект дочернему элементу (в данном случае Date объект).

При использовании атрибутов HTML вы должны знать, что они всегда являются строками. Данные JS необходимо преобразовать в строку в родительском элементе, а затем, возможно, преобразовать обратно в соответствующий тип JS в дочернем элементе. Такое преобразование не выполняется с выражениями свойств, потому что данные остаются в "области JS".

Итак, почему бы не всегда использовать выражения свойств? Сразу приходят на ум два примера:

1. Чтобы выражение свойства работало, вам необходимо знать детали реализации дочернего элемента, то есть то, что у него есть соответствующее свойство JS. (Если вы имеете дело со своими собственными элементами на основе Lit внутри одного проекта, это не проблема.)

2. Если вы хотите применить селекторы на основе атрибутов (например, для стилизации my-button[disabled] { /* CSS ... /* }или используя querySelector).