Lepseudo-élémentCSS::part() représente n'importe quel élément dans unarbre fantôme (shadow tree) qui a un attributpart correspondant.

custom-element::part(foo) {  /* Styles à appliquer à la partie `foo` */}

Description

L'attribut globalpart permet de rendre un élément d'un arbre fantôme visible pour son DOM parent. Les noms de parties déclarés à l'aide de l'attributpart sont utilisés comme paramètres du pseudo-élément::part(). De cette manière, vous pouvez appliquer des styles CSS aux éléments de l'arbre fantôme depuis l'extérieur.

Les noms de parties sont similaires aux classes CSS : plusieurs éléments peuvent avoir le même nom de partie, et un seul élément peut avoir plusieurs noms de parties. Tous les noms de parties utilisés dans le pseudo-élément::part() doivent être présents dans la valeurpart déclarée sur l'élément de l'arbre fantôme, mais l'ordre des noms de parties n'a pas d'importance, c'est-à-dire que les sélecteurs::part(tab active) et::part(active tab) sont identiques.

Le pseudo-élément::part() n'est visible que pour le DOM parent. Cela signifie que lorsqu'un arbre fantôme est imbriqué, les parties ne sont visibles pour aucun ancêtre autre que le parent direct. L'attributexportparts résout cette limitation en exportant explicitement les noms de parties déjà définis, les rendant ainsi stylables globalement.

Lespseudo-classes (comme::part(label):hover) peuvent être ajoutées au sélecteur::part(), mais lespseudo-classes structurelles qui correspondent en fonction des informations de l'arbre, telles que:empty et:last-child, ne peuvent pas être ajoutées.

Des pseudo-éléments supplémentaires, tels que::before, peuvent être ajoutés au sélecteur::part(), mais des éléments::part() supplémentaires ne peuvent pas être ajoutés. Par exemple,::part(confirm-button)::part(active) ne correspond jamais à rien, c'est-à-dire qu'il n'est pas identique à::part(confirm-button active). Cela est dû au fait que cela exposerait plus d'informations structurelles que prévu.

Syntaxe

::part(<ident>+) {  /* ... */}

Exemples

HTML

<template>  <style>    *,    ::before,    ::after {      box-sizing: border-box;      padding: 1rem;    }    :host {      display: flex;    }  </style>  <div part="tab active">Onglet A</div>  <div part="tab">Onglet B</div>  <div part="tab">Onglet C</div></template><tabbed-custom-element></tabbed-custom-element>

CSS

tabbed-custom-element::part(tab) {  color: blue;  border-bottom: transparent solid 4px;}tabbed-custom-element::part(tab):hover {  background-color: black;  color: white;}tabbed-custom-element::part(tab active) {  border-color: blue !important;}

JavaScript

const template = document.querySelector("#tabbed-custom-element");globalThis.customElements.define(  template.id,  class extends HTMLElement {    constructor() {      super().attachShadow({ mode: "open" }).append(template.content);    }  },);

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'attributpart
• La fonction de pseudo-classe:state()
• L'attributexportparts
• Le module desparties fantômes CSS