Vom Autor definierte CSS-Namen und Shadow DOM: In Spezifikation und Praxis

Noam Rosenthal

Von Autoren definierte CSS-Namen und das Shadow DOM müssen zusammenwirken. Einige Browser entsprechen jedoch nicht der Spezifikation, manchmal und jeder CSS-Name ist auf etwas andere Weise inkonsistent.

In diesem Artikel wird der aktuelle Status des Verhaltens für vom Autor definierte CSS-Namen dokumentiert in der Hoffnung, dass dies als Anhaltspunkt zur Verbesserung Interoperabilität in naher Zukunft.

Was sind vom Autor definierte Preisvergleichsportal-Namen?

Autorendefinierte CSS-Namen sind ein relativ alter CSS-Syntaxmechanismus, der ursprünglich für die Regel @keyframes eingeführt, die eine <keyframe-name> definiert als eine benutzerdefinierte ID oder einen String. Der Zweck dieses Konzepts besteht darin, und in einem anderen Teil eines Stylesheets darauf verweisen.

/* "fade-in" is a CSS name, representing a set of keyframes */
@keyframes fade-in {
  from { opacity: 0 };
  to { opacity: 1 }
}

.card {
  /* "fade-in" is a reference to the above keyframes */
  animation-name: fade-in;
}

Andere CSS-Funktionen, in denen CSS-Namen verwendet werden, sind Schriftarten, Eigenschaftdeklarationen, Containerabfragen und kürzlich Informationen über Übergänge, Ankerpositionierung und scrollbare Animationen. Die folgende nicht umfassende Tabelle enthält Namen deren Status von Chrome überprüft wird.

Wie Sie in der Tabelle sehen können, hat ein Name eines Preisvergleichsportals normalerweise ein entsprechendes CSS-Element reference beschrieben. Beispielsweise ist animation-name ein Verweis auf die @keyframes Namen. CSS-Namen unterscheiden sich von Namen, die im DOM definiert sind, wie z. B. Attribute und Tag-Namen, da sie deklariert sind und dann im Kontext von Stylesheets hinzugefügt.

Wie Namen mit dem Shadow DOM zusammenhängen

CSS-Namen dienen der Erstellung von Beziehungen zwischen verschiedenen Teilen eines Dokument oder Stylesheet, Shadow DOM ist das Gegenteil bewirkt. Es verkapselt Beziehungen, damit sie nicht lecker werden. für Webkomponenten, die einen eigenen Namespace haben sollen.

Durch das Verbinden von CSS-Namen und dem Shadow DOM wird die Erfahrung beim Erstellen Webkomponenten sollten sich ausdrucksstark genug anfühlen, um flexibel, aber beschränkt zu sein. um stabil genug zu sein.

Das ist theoretisch gut. In der Praxis weisen Browser auf unterschiedliche CSS-Arten hin -Namen interagieren mit dem Shadow DOM, beide zwischen Elementen im selben Browser und zwischen den Funktionen und der Spezifikation.

Zusammenspiel von Namen und Shadow DOM

Um das Problem zu verstehen, sollten Sie wissen, wie diese Teile theoretisch zusammenarbeiten sollten.

Die allgemeine Regel

Die allgemeine Regel für das Verhalten von CSS-Namen in Schattenbäumen wird in der Spezifikation der CSS-Bereichsebene 1 Zusammenfassend lässt sich sagen, dass ein CSS-Name innerhalb des Bereichs, in dem er definiert ist, global ist, d. h. Der Zugriff ist von nachkommenden Schattenbäumen möglich, nicht jedoch von gleichgeordneten oder Ancestor-Schattenbäume. Beachten Sie, dass dies im Gegensatz zu Namen auf der Webplattform wie -Element-IDs, die im selben Baumbereich gekapselt sind.

Ausnahme von der Regel: @property

Im Gegensatz zu anderen CSS-Namen werden CSS-Eigenschaften nicht von Shadow DOM gekapselt. Sie sind vielmehr das gängige Mittel, um Parameter über verschiedene Schatten Bäumen. Dadurch wird der @property-Deskriptor Special: Er sollte sich wie eine Deklaration des Typs „Document-global“ verhalten, definiert, wie sich eine bestimmte benannte Eigenschaft verhält. Weil Unterkünfte übereinstimmen müssen Schattenbäume führt zu einer unerwarteten Abweichung der Eigenschaftsdeklarationen. Daher werden @property-Deklarationen zur Vereinfachung und Auflösung angegeben. entsprechend der Reihenfolge der Dokumente.

Funktionsweise der Regel mit ::part

Schattenteile Blenden Sie ein Element innerhalb eines Schattenbaums für seine übergeordnete Struktur frei. Dadurch wird der Die übergeordnete Struktur kann auf dieses Element zugreifen und es auch mithilfe der Funktion ::part gestalten -Elements.

Da bei ::part zwei Baumbereiche erlaubt sind, ein Element mit einem Stil zu versehen, gilt Folgendes: Kaskadenreihenfolge angegeben ist:

1. Prüfen Sie zuerst den Stil im Schattenkontext. Dies ist die „Standardeinstellung“ Stil des Teils.
2. Wenden Sie dann den in ::part definierten externen Stil an. Dies ist die "angepasst" Stil des Teils.
3. Wenden Sie dann einen beliebigen internen Stil an, der zusammen mit !important definiert wurde. So kann ein benutzerdefiniertes Element eine bestimmte Eigenschaft eines bestimmten Teil kann nicht von ::part angepasst werden.

Dies bedeutet, dass auf Namen innerhalb des Shadow DOM von einem ::part, da ::part ein Stil auf Hostebene und kein Schatten auf Ebene ist . Beispiel:

// inside the shadow DOM:
@keyframes fade-in {
  from { opacity: 0}
}

// This shouldn't work!
// The host style shouldn't know the name "fade-in"
::part(slider) {
  animation-name: fade-in;  
}

Funktionsweise der Regel mit Inline-Stilen

Im Gegensatz zu ::part können Inline-Styles mit dem Attribut style oder solchen das programmatische Festlegen des Stils mithilfe eines Skripts, wird auf den Bereich beschränkt, in dem das Element für die der Geltungsbereich liegt. Das liegt daran, dass Sie zum Anwenden eines Stils auf ein Element Zugriff benötigen. auf den Element-Ziehpunkt und somit zum Schattenstamm selbst.

Wie CSS-Namen und das Shadow DOM in der Realität zusammenarbeiten

Obwohl die vorstehenden Regeln gut definiert und einheitlich sind, gilt die aktuelle Implementierungen nicht immer widerspiegeln. In der Praxis funktioniert @property konsistent von der Spezifikation. und die meisten anderen Funktionen haben Programmfehler, von denen einige noch nicht veröffentlicht, sodass Sie sie beheben können.)

Um zu testen und zu demonstrieren, wie diese Funktionen in der Praxis funktionieren, haben wir den folgende Seite: https://css-names-in-the-shadow.glitch.me/. Diese Seite enthält mehrere iFrames, die sich jeweils auf eine der Funktionen konzentrieren und sechs Szenarien:

• Äußerer Verweis auf einen äußeren Namen: kein Shadow DOM. Dies sollte arbeiten.
• Äußerer Verweis auf einen inneren Namen: Dies sollte nicht funktionieren, da dies bedeutet, dass der im Schattenkontext definierte Name durchgesickert ist.
• Innerer Verweis auf den äußeren Namen: sollte als baumbezogene Namen funktionieren. werden von den Schattenwurzeln übernommen.
• Innerer Verweis auf den inneren Namen: Dies sollte funktionieren, da sowohl der Name des Referenzen im gleichen Umfang liegen.
• ::part-Verweis auf den äußeren Namen: Dies sollte funktionieren, da sowohl der ::part-Wert und der Name im selben Bereich deklariert sind.
• ::part-Verweis auf den inneren Namen: Dies sollte nicht funktionieren, da der äußere Geltungsbereich sollte keine Kenntnisse über Namen erlangen, die im Shadow DOM deklariert sind.

@keyframes

Wie in der Spezifikation definiert, sollten Sie auf Keyframe-Namen verweisen können. innerhalb eines Schattenstamms, solange sich die At-Regel @keyframes in einem Ancestor befindet Umfang. In der Praxis wird dieses Verhalten in keinem Browser implementiert, und der Keyframe Auf Definitionen kann nur in dem Umfang verwiesen werden, in dem sie definiert sind. Weitere Informationen finden Sie unter issue 10540.

@property

Wie in der Spezifikation definiert, gilt jede Deklaration von @property als auf den Dokumentumfang reduziert. Heutzutage können Sie in allen Browsern @property im Dokumentumfang und @property-Deklarationen innerhalb Schattenstammelemente werden ignoriert.
Siehe Problem 10541.

Browserspezifische Fehler

Die anderen Funktionen verhalten sich nicht in allen Browsern einheitlich:

• @font-face wird auf den Stammbereich in Safari reduziert.
• Chromium lässt die Übernahme von @anchor-name-Regeln in einem Schattenstamm nicht zu
• @scroll-timeline-name und @view-timeline-name sind nicht korrekt festgelegt. auf ::part (auch in Chromium).
• Kein Browser lässt die Deklaration von @font-palette-values in einem Shadow-Stamm zu.
• view-transition-class kann innerhalb eines Schattenstamms (dem Übergang) definiert werden. sich außerhalb der Schattenwurzel befindet.)
• Firefox ermöglicht ::part den Zugriff auf innere Schattennamen (Containerabfragen, Keyframes).
• @counter-style in Firefox und Safari wird in einem Shadow-Stamm nicht berücksichtigt.

Die Zahlen für counter-reset, counter-set und counter-increment sind leicht Regeln, weil es implizite Namen sind und CSS-Eigenschaften deklarieren über ein etabliertes und bewährtes Regelwerk verfügen.

Fazit

Die schlechte Nachricht ist, dass die aktuelle Interoperabilität in Bezug auf CSS-Namen und das Shadow DOM ist die User Experience inkonsistent und Buggy. Keine der hier untersuchten Funktionen verhält sich konsistent bei allen und den jeweiligen Spezifikationen entsprechen. Die gute Nachricht ist, dass das Delta für eine einheitliche Nutzererfahrung eine endliche mit einer Liste der Programmfehler und Spezifikationsprobleme. Lassen Sie uns das ändern. In der Zwischenzeit kann diese Übersicht hoffentlich hilfreich sein, wenn Sie Probleme mit der Inkonsistenzen, die in diesem Artikel beschrieben werden.