Styling im Schattendom mit CSS -Schattenteilen

Safari 13.1 führte die Unterstützung für CSS -Schatten -Teile ein, was bedeutet, dass der ::part() Selektor jetzt von Chrome, Edge, Opera, Safari und Firefox unterstützt wird. In diesem Artikel werden seine Verwendungen untersucht und zunächst die Verpackungsfunktionen von Shadow Dom überprüft.

Vorteile der Schatten -Dom -Verpackung

Bei Giffgaff haben wir eine große Menge an CSS -Code, die von verschiedenen Personen auf viele verschiedene Arten geschrieben wurden. Mal sehen, welche Probleme das bringen kann.

Benennung von Konflikten

Klassenname Konflikte sind anfällig für CSS. Ein Entwickler kann einen Klassennamen namens .price erstellen. Ein anderer Entwickler (und vielleicht sogar dieselbe Person) kann denselben Klassennamen verwenden, ohne ihn zu wissen.

CSS fordert keine Fehler auf. Jetzt erhält jedes HTML -Element mit dieser Klasse Stile für zwei völlig unterschiedliche Dinge.

Shadow Dom löst dieses Problem. CSS-in-JS-Bibliotheken wie Emotionen und gestylerte Komponenten lösen dieses Problem auch auf unterschiedliche Weise, indem sie zufällige Klassennamen wie .bwzfXH generieren. Dies hilft sicherlich, Konflikte zu vermeiden! CSS-in-JS hindert jedoch niemanden daran, Ihre Komponenten auf andere Weise zu brechen. Zum Beispiel……

Grundstile und CSS zurücksetzen

HTML -Elementelektoren können verwendet werden (z.<button></button> Und<div> ) Styles anwenden. Diese Stile können die Komponente brechen. Shadow Dom ist der einzige Mechanismus, der (fast) vollständig eingekapselt ist-Sie können sicher sein, dass Ihre Komponenten selbst in einer unordentlichen <code>!important Codebasis konsistent aussehen, da jede Komponente eingekapselt wird.

 /* Dies wirkt sich nicht auf die Schaltflächen im Schattendom*/aus
Taste {Hintergrundfarbe: Limette! Wichtig; }

Ich denke nicht, dass es eine gute Praxis ist, das Element so zu stylen, aber es passiert. Auch wenn dies geschieht, wirken sich diese Stile nicht auf den Schattendom aus.

Es ist erwähnenswert, dass erfragbare Stile wie Farbe, Schriftart und Linienhöhe in Shadow Dom immer noch vererbt werden. Um dies zu verhindern, verwenden Sie all: initial oder vorzugsweise all: revert nachdem der Browser besser unterstützt wird.

Schauen wir uns ein gemeinsames Beispiel für CSS an, das direkt auf HTML -Elemente angewendet wird. Betrachten Sie Eric Meyers Reset -Code:

 HTML, Körper, Div, Span, Applet, Objekt, Iframe,
H1, H2, H3, H4, H5, H6, P, Blockquote, PRE.
ABBR, Akronym, Adresse, groß, zitieren, Code, Code,
Del, DFN, EM, IMG, INS, KBD, Q, S, Samp,
kleiner Streik starke sup tt var
B, u, ich, Mitte,
DL, DT, DD, OL, UL, Li, li,
Fieldset, Form, Etikett, Legende,
Tisch, Bildunterschrift, TBODY, TFOOT, THE, TR, TH, TD,
Artikel beiseite, Leinwand, Details, eingebettet,
Abbildung, Figcaption, Fußzeile, Header, Hgroup,
Menü, NAV, Ausgabe, Rubin, Abschnitt, Zusammenfassung,
Zeit, Marke, Audio, Video {
  Rand: 0;
  Polsterung: 0;
  Grenze: 0;
  Schriftgröße: 100%;
  Schriftart: Erbe;
  vertikaler Align: Grundlinie;
}

Was passiert, wenn die von uns verwendete Komponente die Standardmargen und Padding -Werte für den Benutzeragenten verwendet? Dieser Reset kann dazu führen, dass er beschädigt aussieht, da diese Standardwerte tatsächlich gelöscht werden.

Shadow Dom ist eine Möglichkeit, diese Probleme zu vermeiden. Mit Shadow Dom können wir vollständig davon überzeugt sein, dass die Komponente wie erwartet rendert, unabhängig davon, in welcher Codebasis sie landet. Auch hier wirkt sich kein Code, der nur für Komponenten verwendet wird, versehentlich etwas anderes - alle ohne umständliche Klassennamenkonventionen. Shadow DOM liefert eine Kapselungsstufe, die auf andere Weise nicht erreicht werden kann.

Die Verpackung ist großartig, aber wir möchten auch, dass unsere Komponenten Themen und anpassbar sind. ::part erleichtert das viel einfacher.

Style Shadow Dom mit :: part ()

Bisher kann CSS nur so benutzerdefinierte Elementstile von außen schattendom ändern, um die benutzerdefinierten CSS -Eigenschaften zu verwenden. In einem strengen Designsystem möchten Sie nur begrenzte Änderungen zulassen, die ideal sein können. Wenn Sie möchten, dass Ihre Komponente allgemeiner ist, kann dies zu Problemen führen. Sie müssen benutzerdefinierte Eigenschaften verwenden, um jedes CSS -Attribut zu definieren, das Sie für Stil bereitstellen möchten. Es klingt einfach sehr kompliziert.

Wenn wir Komponenten auf unterschiedliche Weise basierend auf Pseudoklasse (wie :hover ) stylen möchten, wird die Situation weiter kompliziert. Grundsätzlich haben wir viele benutzerdefinierte Eigenschaften. Schauen wir uns ein Beispiel von Ionic an (eine Reihe von Open -Source -Webkomponenten). Schauen Sie sich alle benutzerdefinierten Eigenschaften an, die auf der Ionenknopfkomponente definiert sind.

Fühlen Sie sich frei, es zu überprüfen.

Ich habe 23 benutzerdefinierte Eigenschaften gezählt. Unnötig zu erwähnen, dass dies alles andere als ideal ist.

Hier ist ein Beispiel für die Verwendung ::part() zu Stilelementen.

In diesem Beispiel habe ich gerade die Farb-, Rand- und Hintergrund -Farbeigenschaften geändert, aber ich kann jede Eigenschaft verwenden, die ich gewünscht habe, ohne durch die definierten benutzerdefinierten Eigenschaften begrenzt zu werden. Beachten Sie , dass ich auch Pseudoklassen :focus kann, z :hover

In diesem Schaltfläche wird die gesamte Komponente für die Style -Einstellung freigelegt. Wenn Ihre Webkomponente jedoch mehrere HTML -Elemente enthält, können Sie nur ausgewählte Teile der Komponente für diese Stileinstellung aussetzen - daher der Name ::part . Dies verhindert, dass der Benutzer der Komponente willkürliche Elemente innerhalb des Schattenbaums stylen. Komponentenautoren sind dafür verantwortlich, die Komponenten, die sie explizit offenlegen möchten, zu enthüllen. Andere Teile der Komponente können visuelle Konsistenz beibehalten oder benutzerdefinierte Eigenschaften verwenden, um weniger Anpassbarkeit zu erreichen.

Wie setzen wir das für unsere Komponenten ein? Lassen Sie uns sehen, wie Sie ::part verwenden, um bestimmte Elemente eines Webkomponenten -Stylings zu erstellen. Alles, was wir tun, ist das Element, das wir aufdecken möchten, eine part hinzuzufügen.

<div part="box"> ...</div>
<button>Klicken Sie auf mich</button>

In diesem Beispiel kann div mit dem vollständigen CSS -Bereich angepasst werden - jedes CSS -Attribut kann geändert werden. Aber die Taste ist gesperrt - niemand kann seine visuellen Effekte außer dem Komponentenautor ändern.

So wie HTML -Elemente mehrere Klassennamen haben können, kann ein Element auch mehrere part haben:

<div part="box thing"> ...</div>

Dies ist, was wir mit ::part bekommen: Indem wir den "Teil" des Elements aufdecken, können wir eine gewisse Flexibilität für die Verwendung von Webkomponenten bieten und gleichzeitig in anderen Bereichen schützen. Egal, ob es sich um Ihr Designsystem, Ihre Komponentenbibliothek oder etwas anderes handelt, die Tatsache, dass CSS -Schatten -Teile zum Mainstream werden, bietet uns ein weiteres aufregendes Werkzeug.