Von CSS gelöst: Donuts Scopes

Stellen Sie sich vor, Sie haben eine Webkomponente, die viele verschiedene Inhalte anzeigen kann. Es wird wahrscheinlich irgendwo einen Slot geben, an dem andere Komponenten injiziert werden können. Die übergeordnete Komponente hat auch ihre eigenen Stile, die nicht mit den Stilen der Inhaltskomponenten zu tun haben, die sie halten kann.

Dies macht eine herausfordernde Situation: Wie können wir verhindern, dass die übergeordneten Komponentenstile nach innen gehen?

Dies ist kein neues Problem - Nicole Sullivan hat es bereits 2011 beschrieben! Das Hauptproblem besteht darin, CSS so zu schreiben, dass es den Inhalt nicht beeinflusst, und sie hat es genau als Donut Scoping .

geprägt.

„Wir brauchen eine Art zu sagen, nicht nur dort, wo Umfang beginnt, sondern wo es endet. So der Bereichsdonut ”.

Auch wenn Donut Scoping in Webjahren ein altes Problem ist. Wenn Sie in Ihrer Suchmaschine der Wahl schnell nach „CSS Donut Scope“ suchen, können Sie zwei Dinge bemerken:

Die meisten von ihnen sprechen über das noch aktuelle @Scope AT-RULE.
Fast jedes Ergebnis ist ab 2021.

Wir erzielen ähnliche Ergebnisse, selbst wenn eine clevere Abfrage „CSS Donut -@scope“ und Jahr für Jahr nichts Neues in die Donut Scope

-Tabelle zu bringen scheint. Es scheint, als hätten Donut Scopes im Hinterkopf als weitere Kopfschmerzen des alten CSS -Global Scope bis @Scope geblieben.

und (Spoiler!), Während das @Scope AT-Rule einen einfacheren Weg für Donut Scoping bringt, muss ich im Laufe der Jahre mehr Lösungen versuchten. Wir werden uns durch jeden von ihnen wagen und bei der heutigen Lösung @Scope einen letzten Stopp machen. Es ist eine schöne Übung in der CSS -Geschichte!

Nehmen Sie zum Beispiel den folgenden Spielbildschirm. Wir haben ein. Parentes Element mit einem Registerkartensatz und einem .content -Steckplatz, in dem eine Inventarkomponente injiziert wird. Wenn wir die Parentsfarbe ändern, dann macht auch die Farbe innerhalb von. Kontent.

Wie können wir dies verhindern? Ich möchte verhindern, dass der Text innerhalb von .Content die Farbe des Parents erbt.

ignorieren Sie es einfach!

Die erste Lösung ist überhaupt keine Lösung! Lassen Sie uns hier greifbarer sein, es ignoriert es nicht nur offensichtlich, sondern akzeptiert es, CSSs globalen Umfangs- und Schreibstilen in diesem Sinne zu akzeptieren. Zurück zu unserem ersten Beispiel gehen wir davon aus, dass wir nicht verhindern können, dass die Stile der Eltern nach innen in die Inhaltskomponente führen. Daher schreiben wir die Stile unserer Eltern mit weniger Spezifität, damit sie von den Inhaltsstilen überschrieben werden können.

body {
  color: blue;
}

.parent {
  color: orange; /* Initial background */
}

.content {
  color: blue; /* Overrides parent's background */
}

Während dieser Ansatz für den Moment ausreicht, wird es im besten Fall, im besten Fall nach ihrer Spezifität als das Projekt zu werden, im besten Fall mühsam und im schlimmsten Fall chaotisch. Komponenten können sich unterschiedlich verhalten, je nachdem, wo sie geschleift sind, und das Ändern unseres CSS oder HTML kann andere Stile auf unerwartete Weise brechen.

Zwei CSS -Eigenschaften betreten eine Bar. Ein Barstool in einer völlig anderen Bar fällt um.

thomas fuchs

Sie können sehen, wie wir in diesem kleinen Beispiel die Stile zweimal überschreiben müssen:

flache Donuts Scopes mit: nicht ()

Unser Ziel ist es dann nur, den. Parent zu umfangreichen und alles auszulassen, was auch immer in den Slot für. Also nicht der. Auf diese Weise werden die.

Sie können einen immensen Unterschied sehen, wenn wir die Devtools für jedes Beispiel öffnen:

body {
  color: blue;
}

.parent > :not(.content) {
  color: orange;
}

So gut wie eine Verbesserung, das letzte Beispiel hat eine flache Reichweite. Wenn also ein weiterer Slot tiefer in die Tiefe versehen wäre, könnten wir ihn nicht erreichen, es sei denn, wir wissen zuvor, wo es geschleift wird.

Dies liegt daran, dass wir den direkten Nachkommensauswahlschalter (& gt;) verwenden, aber ich konnte keinen Weg finden, es ohne ihn funktionieren zu lassen. Selbst wenn Sie eine Kombination komplexer Selektoren im Inneren verwenden: nicht () scheint nützlich zu führen. Zum Beispiel erwähnte Dr. Lea Verou im Jahr 2021 Donut Scoping mit: nicht () mit dem folgenden Selektor -Cocktail:

Dieses Snippet scheint jedoch mit der. Container/. -Parent -Klasse anstelle seiner Nachkommen übereinzustimmen, und es wird angemerkt, dass es immer noch flaches Donut -Scoping wäre:

.container:not(.content *) {
  /* Donut Scoped styles (?) */
}

bis alle modernen Browser unterstützen jetzt komplexe Selektoren in: nicht ()! ? (@Leaverou) 28. Januar 2021

Donut Scoping mit @Scope



Unser letzter Schritt für die Abschluss von Donut Scoping besteht darin, über eine DOM -Schicht hinauszugehen. Zum Glück haben wir letztes Jahr die @Scope AT-Rule geschenkt (Sie können mehr darüber in seinem Almanac-Eintrag lesen). Kurz gesagt können wir einen Unterbaum im DOM auswählen, in dem unsere Stile abgebildet werden, also kein globaler Bereich mehr!

Was besser ist, wir können Slots im von uns ausgewählten Teilbaum lassen (normalerweise als Umfangswurzel bezeichnet). In diesem Fall möchten wir das. Parentes Element stylen, ohne zu schöpfen .Content:

body {
  color: blue;
}

.parent {
  color: orange; /* Initial background */
}

.content {
  color: blue; /* Overrides parent's background */
}

Und was besser ist, es erkennt jedes entsprechende Element im Inneren. Parent, egal wie verschachtelt es sein mag. Wir müssen uns also keine Sorgen machen, wo wir unsere Slots schreiben. Im letzten Beispiel könnten wir stattdessen den folgenden Stil schreiben, um die Textfarbe des Elements in. Parent zu ändern, ohne zu berühren.

body {
  color: blue;
}

.parent > :not(.content) {
  color: orange;
}

Obwohl es unpraktisch erscheint, alle Elemente aufzulisten, die wir ändern werden, können wir nicht so etwas wie den Universal Selektor (*) verwenden, da es den Scoping von verschachtelten Slots durcheinander bringen würde. In diesem Beispiel würde es das verschachtelte .konnitieren aus dem Zielfernrohr, nicht jedoch seinen Container. Da die Farbeigenschaft erbt, würde der verschachtelte .Content die Farben trotzdem ändern!

und voilà! Beide Slots befinden sich in unseren Scoped Donut -Löchern:

flaches Scoping ist mit dieser Methode immer noch möglich. Wir müssten nur unseren Slot -Selektor neu schreiben, damit nur direkte Nachkommen von. Parent aus dem Geltungsbereich ausgelassen werden. Wir müssen jedoch den: Scope -Selektor verwenden, der sich auf die Scoping -Wurzel bezieht, oder in diesem Fall Parent:

.container:not(.content *) {
  /* Donut Scoped styles (?) */
}

wir können den Universal Selektor in diesem Fall verwenden, da er flach ist.

Schlussfolgerung

Donut Scoping, ein Möchtegern -Feature, das 2011 geprägt wurde, wurde im Jahr 2024 endlich zum Leben erweckt. Es ist immer noch verblüffend, wie es bis vor kurzem als eine weitere Folge von CSS Global Scope in unseren Köpfen zu sitzen schien, während es so viele Quickle für sich hatte. Es wäre jedoch unfair zu sagen, dass es unter den Radaren aller, seit die CSSWG (die Personen hinter dem Schreiben der Spezifikation für neue CSS-Funktionen) eindeutig die Absicht hatten, sie anzusprechen, wenn sie die Spezifikation für das @Scope at-Rule schreiben.

Was auch immer es sein mag, ich bin dankbar, dass wir in unserem CSS echte Donut -Scoping haben können. Bis zu einem gewissen Grad müssen wir noch darauf warten, dass Firefox es unterstützt. ?

Diese Browser -Support -Daten stammen aus Caniuse, was mehr Details enthält. Eine Zahl zeigt an, dass Browser die Funktion in dieser Version und nach oben unterstützt.

Das obige ist der detaillierte Inhalt vonVon CSS gelöst: Donuts Scopes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!