Noms CSS d�finis par l'auteur et Shadow DOM: dans les sp�cifications et dans la pratique

Noam Rosenthal

Les noms CSS d�finis par l'auteur et le Shadow DOM sont cens�s fonctionner ensemble. Cependant, les navigateurs ne sont pas coh�rents avec la sp�cification, parfois avec chaque et les noms de CSS pr�sentent des incoh�rences l�g�rement diff�rentes.

Cet article d�crit l'�tat actuel du comportement des noms CSS d�finis par l'auteur. dans les champs d'application de l'ombre, en esp�rant qu'ils puissent servir de guide pour am�liorer leur interop�rabilit�.

Que sont les noms CSS d�finis par l'auteur ?

Les noms CSS d�finis par l'auteur sont un m�canisme de syntaxe CSS relativement ancien, introduit pour la r�gle @keyframes, qui d�finit un <keyframe-name> comme soit un identifiant personnalis�, soit une cha�ne. Ce concept vise � d�clarer d'un �l�ment dans une partie d'une feuille de style et faire r�f�rence � celui-ci dans une autre partie.

/* "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;
}

Les polices, les d�clarations de propri�t� sont d'autres fonctionnalit�s CSS des requ�tes de conteneur et, plus r�cemment, les transitions de vues, le positionnement des ancres et des animations li�es au d�filement. Le tableau non complet suivant inclut les noms dont Chrome v�rifie l'�tat.

Comme vous pouvez le voir dans le tableau, un name CSS poss�de g�n�ralement un CSS r�f�rence. Par exemple, animation-name est une r�f�rence au @keyframes. son nom. Les noms CSS sont diff�rents de ceux d�finis dans le DOM, comme les attributs. et les noms de tags, car ils sont d�clar�s puis r�f�renc�s dans le contexte feuilles de style.

Lien entre les noms et le Shadow DOM

Alors que les noms CSS sont con�us pour cr�er des relations entre diff�rentes parties d'une ou d'une feuille de style, le Shadow DOM est construit pour faire le contraire. Il encapsule les relations pour �viter les fuites sur des composants Web cens�s avoir leur propre espace de noms.

En associant les noms CSS et le Shadow DOM, vous pouvez Les composants Web doivent �tre suffisamment expressifs pour �tre flexibles, mais limit�s. pour �tre stables.

C'est une bonne th�orie. En pratique, les navigateurs n'ont pas le m�me style CSS interagissent avec le Shadow DOM, les deux fonctionnalit�s au sein d'une m�me pour tous les navigateurs, et entre les fonctionnalit�s et la sp�cification.

Fonctionnement des noms et du Shadow DOM

Pour comprendre le probl�me, il est utile de comprendre comment devraient fonctionner ensemble en th�orie.

Règle générale

La règle générale régissant le comportement des noms CSS dans les arbres d'ombre est définie dans Spécification du niveau 1 de champ d'application CSS. Pour résumer, un nom CSS est global dans le champ d'application dans lequel il est défini. Autrement dit, il est accessible depuis les arbres descendants, mais pas depuis les frères ou sœurs ou les arbres fantômes ancêtres. Notez que cela diffère des noms utilisés sur la plate-forme Web comme des ID d'éléments, qui sont encapsulés dans le même champ d'application d'arborescence.

Exception à la règle: @property

Contrairement aux autres noms CSS, les propriétés CSS ne sont pas encapsulées par le Shadow DOM. Il s'agit plutôt du moyen le plus courant de transmettre des paramètres à différentes zones d'ombre arbres. Ainsi, Descripteur @property spécial: il est censé se comporter comme une déclaration de type document-global qui définit le comportement d'une propriété nommée spécifique. Parce que les établissements doivent correspondre entre les arbres fantômes, une non-concordance des déclarations de propriété résultats. Les déclarations @property sont donc spécifiées comme étant aplaties et résolues. conformément à l'ordre des documents.

Fonctionnement de la règle avec ::part

Ombres expose un élément situé à l'intérieur d'une arborescence fantôme à son arborescence parente. Ainsi, l'arborescence parente peut accéder à cet élément et lui appliquer un style à l'aide de ::part .

Étant donné que ::part permet à deux champs d'application d'arborescence de styliser le même élément, les éléments suivants l'ordre en cascade est spécifié:

1. Tout d'abord, vérifiez le style dans le contexte de l'ombre. Il s'agit de l'option "par défaut" et le style de la pièce.
2. Appliquez ensuite le style externe tel que défini dans ::part. Il s'agit de la "personnalisé" et le style de la pièce.
3. Appliquez ensuite tout style interne défini avec !important. Cela permet à un élément personnalisé de déclarer qu'une certaine propriété d'une certaine La partie n'est pas personnalisable par ::part.

Cela signifie que les noms issus du Shadow DOM ne peuvent pas être référencés à partir d'un ::part, car ::part est un style de portée hôte plutôt que de portée ombre. du style. Exemple :

// 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;  
}

Fonctionnement de la règle avec les styles intégrés

Contrairement à ::part, les styles intégrés avec l'attribut style ou ceux en définissant le style par programmation à l'aide d'un script, sont limités à l'endroit où l'élément est limité. En effet, pour appliquer un style à un élément auquel vous avez besoin d'accéder la poignée de l'élément, et donc à la racine de l'ombre elle-même.

Comment les noms CSS et le Shadow DOM fonctionnent ensemble en réalité

Bien que les règles précédentes soient bien définies et cohérentes, les implémentations ne reflètent pas toujours cela. En pratique, @property fonctionne différemment des spécifications de la spécification de manière cohérente. entre les navigateurs, et la plupart des autres fonctionnalités présentent des bugs ouverts (certains sont des pas encore sortis, il est donc temps de les corriger).

Pour tester et démontrer le fonctionnement de ces fonctionnalités en pratique, nous avons créé page suivante: https://css-names-in-the-shadow.glitch.me/. Cette page comporte plusieurs cadres iFrame, chacun étant axé sur l'une de ses fonctionnalités et teste six scénarios:

• Référence externe à un nom externe: aucun Shadow DOM n'est utilisé, ce qui doit travail.
• Référence extérieure à un nom intérieur: ceci ne devrait pas fonctionner, signifie que le nom défini dans le contexte fictif a été divulgué.
• Référence interne au nom externe: ceci doit fonctionner, car il s'agit de noms arborescence. sont héritées par les racines fantômes.
• Référence interne au nom interne: ceci doit fonctionner, car le nom du ont le même champ d'application.
• Référence ::part au nom externe: cela doit fonctionner, car ::part est à la fois et le nom sont déclarés dans le même champ d'application.
• Référence ::part au nom interne: cela ne devrait pas fonctionner, car le champ d'application externe ne devrait pas connaître les noms déclarés dans le Shadow DOM.

@keyframes

Comme défini dans la spécification, vous devez pouvoir référencer des noms d'images clés depuis une racine fantôme, à condition que la règle @keyframes at-rule se trouve dans un ancêtre le champ d'application. En pratique, aucun navigateur ne met en œuvre ce comportement, et l'image clé les définitions ne peuvent être référencées que dans le champ d'application dans lequel elles sont d�finies. Voir probl�me 10540.

@property

Comme d�fini dans la sp�cification, toute d�claration de @property sera aplatie dans la port�e du document. Mais aujourd'hui, dans tous les navigateurs, vous ne pouvez d�clarer @property dans le champ d'application du document et @property dans le champ d'application les racines fant�mes sont ignor�es.
Consultez le probl�me 10541.

Bugs sp�cifiques au navigateur

Les autres fonctionnalit�s n'offrent pas un comportement coh�rent d'un navigateur � l'autre:

• @font-face est aplati au niveau du champ d'application racine dans Safari.
• Chromium n'autorise pas l'h�ritage de r�gles @anchor-name dans une racine fant�me
• Le champ d'application de @scroll-timeline-name et @view-timeline-name n'est pas correct sur ::part (�galement dans Chromium).
• Aucun navigateur ne permet de d�clarer @font-palette-values dans une racine fant�me.
• view-transition-class peut �tre d�fini � l'int�rieur d'une racine fant�me (la transition se trouve en dehors de la racine de l'ombre).
• Firefox permet � ::part d'acc�der aux noms fant�mes internes (requ�tes de conteneur, images cl�s).
• Firefox et Safari ne respectent pas @counter-style dans une racine fant�me.

Notez que counter-reset, counter-set et counter-increment ont l�g�rement des r�gles diff�rentes, car il s'agit de noms implicites qui d�clarent des propri�t�s CSS. disposent d'un ensemble de r�gles �tabli et test�.

Conclusion

Mauvaise nouvelle : si vous examinez l'instantan� de l'�tat d'interop�rabilit� actuel, En ce qui concerne les noms CSS et le Shadow DOM, l'exp�rience est incoh�rente et ou des bugs. Aucune des fonctionnalit�s que nous avons examin�es ici ne se comporte de mani�re coh�rente et selon les sp�cifications. La bonne nouvelle, c'est que le delta pour rendre l'exp�rience coh�rente est une liste de bugs et de probl�mes de sp�cifications. R�solvons � pr�sent ce probl�me. En attendant, nous esp�rons que cette pr�sentation vous sera utile si vous rencontrez des difficult�s les incoh�rences d�crites dans cet article.