Sprawdzone metody dotyczące elementów niestandardowych

Dzięki elementom niestandardowym możesz tworzyć własne tagi HTML. Ta lista kontrolna obejmuje sprawdzone metody tworzenia elementów wysokiej jakości.

Elementy niestandardowe umożliwiają rozszerzanie kodu HTML i definiowanie własnych tagów. Są ale są też mało zaawansowane, co oznacza, że zawsze jasne, jak najlepiej wdrożyć własny element.

Aby zapewnić Ci jak najlepsze wrażenia, opracowaliśmy listę kontrolną. Ten raport zawiera wszystko, co naszym zdaniem jest potrzebne do dobrze działający element niestandardowy.

Lista kontrolna

Shadow DOM

Atrybuty i właściwości

Wydarzenia

Filmy objaśniające

Nie zastępuj autora strony

Może się zdarzyć, że programista używający Twojego elementu będzie chciał zastąpić część stanie początkowym. Na przykład zmiana ARIA role lub zaznaczenia za pomocą tabindex Sprawdź, czy ustawiono te i inne atrybuty globalne. przed zastosowaniem własnych wartości.

connectedCallback() {
  if (!this.hasAttribute('role'))
    this.setAttribute('role', 'checkbox');
  if (!this.hasAttribute('tabindex'))
    this.setAttribute('tabindex', 0);

Ustaw właściwości jako leniwe

Programista może spróbować ustawić właściwość w elemencie, zanim jego definicja została wczytana. Zwłaszcza wtedy, gdy deweloper korzysta z która obsługuje wczytywanie komponentów i umieszczanie ich na stronie, ich właściwości z modelem.

W tym przykładzie Angular deklaratywnie wiąże model swojego modelu właściwość isChecked do właściwości checked pola wyboru. Jeśli definicja zapytania pole wyboru instrukcji zostało leniwie ładowane, możliwe, że Angular próbował ustawić zaznaczoną właściwość przed uaktualnieniem elementu.

<howto-checkbox [checked]="defaults.isChecked"></howto-checkbox>

W tym scenariuszu element niestandardowy powinien sprawdzać, czy jakieś właściwości mają została już ustawiona w instancji. <howto-checkbox> demonstruje ten wzorzec przy użyciu metody o nazwie _upgradeProperty().

connectedCallback() {
  ...
  this._upgradeProperty('checked');
}

_upgradeProperty(prop) {
  if (this.hasOwnProperty(prop)) {
    let value = this[prop];
    delete this[prop];
    this[prop] = value;
  }
}

_upgradeProperty() przechwytuje wartość z nieuaktualnionej instancji i usuwa właściwości, tak aby nie powielała ona metody ustawiającej właściwości elementu niestandardowego. Dzięki temu, gdy definicja elementu w końcu zostanie wczytana, może od razu będą odzwierciedlać właściwy stan.

Unikanie problemów z ponownym wyświetlaniem

Może łatwo odzwierciedlić stan w polu attributeChangedCallback() usługi bazowej, na przykład:

// When the [checked] attribute changes, set the checked property to match.
attributeChangedCallback(name, oldValue, newValue) {
  if (name === 'checked')
    this.checked = newValue;
}

Może to jednak spowodować nieskończoną pętlę, jeśli licytujący będzie też odzwierciedlić atrybut.

set checked(value) {
  const isChecked = Boolean(value);
  if (isChecked)
    // OOPS! This will cause an infinite loop because it triggers the
    // attributeChangedCallback() which then sets this property again.
    this.setAttribute('checked', '');
  else
    this.removeAttribute('checked');
}

Można też zezwolić na odzwierciedlenie przez narzędzie ustawiające właściwości w odniesieniu do atrybutu, deweloper określi jego wartość na podstawie atrybutu.

set checked(value) {
  const isChecked = Boolean(value);
  if (isChecked)
    this.setAttribute('checked', '');
  else
    this.removeAttribute('checked');
}

get checked() {
  return this.hasAttribute('checked');
}

W tym przykładzie dodanie lub usunięcie atrybutu spowoduje ustawienie właściwości.

attributeChangedCallback() może też służyć do obsługi efektów ubocznych. np. stosowanie stanów ARIA.

attributeChangedCallback(name, oldValue, newValue) {
  const hasValue = newValue !== null;
  switch (name) {
    case 'checked':
      // Note the attributeChangedCallback is only handling the *side effects*
      // of setting the attribute.
      this.setAttribute('aria-checked', hasValue);
      break;
    ...
  }
}