Verlassen Sie sich beim Gestalten von Webkomponenten nicht auf Standardattributwerte

Verstehen Sie mich nicht falsch, ich habe nichts gegen Standardwerte für Webkomponenten-APIs. Das Problem, das ich mit ihnen habe, ist, dass sie unzuverlässig sind.

Das Problem

Ein gängiger Ansatz zum Bereitstellen einer Liste verfügbarer Optionen für eine API ist die Verwendung des Untion-Typs von TypeScript.

/** The display variant for the button */
@property({reflect: true})
variant: 'default' | 'solid' | 'ghost' = 'default';

Hier finden Sie einige grundlegende CSS-Anweisungen, damit die Variationen funktionieren.

:host {
  --accent-color: #0265dc;
}

button {
  cursor: pointer;
  padding: 0.5rem;
}

:host([variant='default']) button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
}

:host([variant='solid']) button {
  border: solid 1px var(--accent-color);
  background-color: var(--accent-color);
  color: white;
}

:host([variant='ghost']) button {
  border: solid 1px transparent;
  background-color: transparent;
  color: var(--accent-color);
}

HINWEIS: Die Codebeispiele verwenden Lit, aber die hier besprochenen Prinzipien können problemlos auf andere Bibliotheken und Frameworks angewendet werden.

Die Herausforderung besteht darin, dass benutzerdefinierte Elemente/Webkomponenten überall verwendet werden können. Sie können in Strings in das DOM eingefügt werden, in serverseitigen Sprachen wie PHP, sie können in der createElement-Funktion von JavaScript oder sogar in Standard-HTML erstellt werden. Was ich damit sagen will, ist, dass es nicht immer eine „typsichere“ Möglichkeit gibt, sicherzustellen, dass benutzerdefinierte Elementattribute korrekt festgelegt werden. Aus diesem Grund lautet einer der Punkte in der PR-Checkliste unserer Komponentenbibliothek:

✅ Attribute und Eigenschaften funktionieren, wenn sie festgelegt, deaktiviert und schlecht festgelegt sind.

Testen unserer API

Anhand dieser Richtlinien testen wir das obige API-Setup.

• Fertig – alles sieht gut aus.

<my-button variant="default">Default Button</my-button>
<my-button variant="solid">Solid Button</my-button>
<my-button variant="ghost">My Button</my-button>

• Unscharf
  • Ohne ein Attributsatz funktioniert es einwandfrei, da wir einen Standardwert haben und dieser so konfiguriert ist, dass er das Attribut auf dem Element widerspiegelt, wenn es festgelegt wird.
  • Wenn wir die Varianteneigenschaft auf undefiniert setzen, werden die Stile beschädigt.

<!-- No attribute set -->
<my-button>No Attribute Button</my-button>

<!-- JSX example -->
<my-button variant={undefined}>Unset Button</my-button>

• Schlecht eingestellt – wenn wir das Variantenattribut auf „Müll“ setzen, bricht es ebenfalls ab.

<my-button variant="rubbish">Rubbish Button</my-button>

Sie können dieses Beispiel hier testen:

Behebung der API

Der einfachste Weg, dies zu beheben, besteht darin, die Schaltflächenelementstile an die Standardstile anzupassen.

button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
  cursor: pointer;
  padding: 0.5rem;
}

Jetzt können wir den Code für die Standardvariante entfernen.

/* We can remove this */
:host([variant='default']) button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
}

Um Verwirrung zu vermeiden, können Sie den Stil verlassen und einen Kommentar hinzufügen.

/* Styles for this variant are under the `button` element */
:host([variant='default']) { }

Aktualisieren wir auch die TypeScript-API, um sie optional zu machen und den Standardwert zu entfernen.

/** The display variant for the button */
@property({ reflect: true })
variant?: 'default' | 'solid' | 'ghost';

Die Elemente verhalten sich jetzt konsistent, wenn der Wert gesetzt, nicht gesetzt oder schlecht gesetzt ist!

Den endgültigen Code können Sie hier sehen:

Abschluss

Indem Sie die Abhängigkeit von Standardwerten entfernen, können Sie robustere Webkomponenten-APIs erstellen. Wenn Sie Standardwerte benötigen, damit Ihre Komponenten ordnungsgemäß funktionieren, lesen Sie unbedingt diesen Artikel, um Webkomponenten zu erstellen, die konsistent funktionieren.

Das obige ist der detaillierte Inhalt vonVerlassen Sie sich beim Gestalten von Webkomponenten nicht auf Standardattributwerte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!