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.