Best Practices für benutzerdefinierte Elemente

Mit benutzerdefinierten Elementen können Sie Ihre eigenen HTML-Tags erstellen. Diese Checkliste enthält Best Practices für die Erstellung qualitativ hochwertiger Elemente.

Mit benutzerdefinierten Elementen können Sie HTML erweitern und eigene Tags definieren. Sie sind ein ist eine leistungsstarke Funktion, die aber nicht besonders schlecht ist. immer klar sein, wie Sie Ihr eigenes Element am besten implementieren.

Um Ihnen die bestmögliche Erfahrung zu bieten, haben wir Checkliste. Sie schlüsselt all die Dinge auf, die wir für gut funktioniertes benutzerdefiniertes Element.

Checkliste

Schatten-DOM

Attribute und Eigenschaften

Ereignisse

Erklärvideos

Seitenautor nicht überschreiben

Es ist möglich, dass ein Entwickler, der Ihr Element verwendet, einige in den Ausgangszustand versetzt. Ändern der ARIA-role oder der Fokussierbarkeit mit tabindex. Überprüfen Sie, ob diese und andere globale Attribute festgelegt wurden. bevor Sie Ihre eigenen Werte anwenden.

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

Eigenschaften faul machen

Ein Entwickler könnte versuchen, eine Eigenschaft für ein Element festzulegen, bevor Definition wurde geladen. Dies gilt insbesondere, wenn der Entwickler Framework, das das Laden von Komponenten, das Einfügen dieser Komponenten auf die Seite Bindung ihrer Attribute an ein Modell.

Im folgenden Beispiel bindet Angular die Funktion isChecked zur checked-Eigenschaft des Kästchens hinzu. Wenn die Definition für wenn ein Lazy Loading für die Anleitung aktiviert war. die ausgewählte Eigenschaft ein, bevor das Element aktualisiert wurde.

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

Ein benutzerdefiniertes Element sollte für dieses Szenario geeignet sein, indem geprüft wird, ob Eigenschaften für die Instanz festgelegt ist. Die <howto-checkbox> veranschaulicht dieses Muster mithilfe der Methode _upgradeProperty().

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

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

_upgradeProperty() erfasst den Wert aus der nicht aktualisierten Instanz und löscht der Eigenschaft fest, damit sie den eigenen Eigenschaften-Setter des benutzerdefinierten Elements nicht verdeckt. Wenn die Definition des Elements schließlich geladen wird, kann sie den richtigen Zustand widerspiegelt.

Rücknahmeprobleme vermeiden

Es ist verlockend, den attributeChangedCallback() zu verwenden, um den Zustand zugrunde liegende Property. Beispiel:

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

Dies kann jedoch eine Endlosschleife erzeugen, wenn der Eigenschafts-Setter auch das Attribut.

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');
}

Alternativ können Sie zulassen, dass der Property-Setter das Attribut reflektiert. Sie lassen den Getter seinen Wert anhand des Attributs bestimmen.

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

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

In diesem Beispiel wird durch das Hinzufügen oder Entfernen des Attributs auch die Eigenschaft festgelegt.

Schließlich können mit attributeChangedCallback() Nebenwirkungen verarbeitet werden. wie das Anwenden von ARIA-Zuständen.

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;
    ...
  }
}