Résumé

  • Le premier projet public du W3C, daté du 22 mai 2012, proposait une frontière fonctionnelle entre sous-arbres DOM ; le projet de 2014 mettait en avant leur composition et la note de 2018 répartissait le sujet entre plusieurs spécifications.
  • Dans le DOM actuel, les enfants fournis par la page peuvent être assignés aux slots d’un arbre shadow sans changer de parent DOM. Les règles CSS ménagent des passages nommés, notamment :host, ::slotted et ::part.

Imaginez une carte de profil vendue comme composant réutilisable. Son auteur a dessiné le bouton avec soin. La page qui l’accueille a un autre auteur, une feuille de style immense et une préférence regrettable pour les boutons vert fluo. Si tout vit dans le même arbre, la peinture déborde. Si le composant se ferme complètement, la page ne peut plus lui confier le portrait ni le nom de la personne. Le vrai problème est l’hospitalité sous contrôle.

Le premier projet public Shadow DOM du W3C, du 22 mai 2012, décrivait des frontières fonctionnelles entre sous-arbres d’un même document. L’idée était de permettre à un composant de conserver une structure interne sans quitter la page. Dans le projet du 17 juin 2014, le vocabulaire de la composition devient central : plusieurs arbres participent à une présentation commune, selon des règles qui décident où leurs contenus se rencontrent.

Puis le document unique a cessé d’être la maison de toutes ces règles. La note du groupe de travail du 1er mars 2018 indique que la matière était intégrée aux spécifications DOM, HTML, CSS Scoping et UI Events. Cette migration raconte une histoire familière du Web : une idée de composant devient assez fondamentale pour que sa plomberie rejoigne celle du navigateur. La note marque le déplacement des textes, tandis que le mécanisme continue de vivre dans les normes de la plateforme.

Le DOM Standard de WHATWG donne le plan de la pièce. Un élément de la page sert d’hôte à une racine shadow et à l’arbre placé sous cette racine. La page peut aussi donner à cet hôte des enfants ordinaires, dans l’arbre « light ». À l’intérieur du composant, un slot attend certains de ces enfants. L’assignation les place dans la présentation composée ; leur parent dans l’arbre DOM sous-jacent reste celui de la page. Un portrait peut donc apparaître au milieu de la carte sans avoir déménagé dans l’arbre shadow.

Cette différence devient très concrète au débogage. Le titre semble posé entre deux éléments internes du composant. Pourtant, un sélecteur ou une opération DOM qui suit les parents réels trouvera le titre du côté de la page. Un slot sans invité peut afficher un contenu de repli prévu par l’auteur du composant. Le navigateur fait le plan de salle ; il ne confond pas les actes de propriété.

La frontière concerne aussi les styles. Le projet CSS Shadow Module du CSSWG décrit le traitement des sélecteurs autour de l’arbre shadow et de l’arbre aplati utilisé pour la présentation. Une règle générale de la page ne traverse pas simplement la racine pour repeindre tous les éléments internes. L’auteur du composant peut néanmoins préparer des prises : :host vise l’hôte depuis ses styles, ::slotted concerne les éléments assignés, et ::part donne un nom à une pièce interne que la page peut styliser. Ce dernier est une invitation précise, pas un double des clés.

Le texte CSS consulté est un projet d’éditeur ; il expose le dessin actuel de ces mécanismes. Les archives du W3C fixent, elles, les étapes de 2012, 2014 et 2018. Ensemble, ces sources décrivent une solution élégante à une dispute d’auteurs : la page choisit certains invités, le composant choisit leurs sièges et les ouvertures de son décor, le navigateur compose ce que le lecteur voit.