::slotted()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

Le pseudo-élément CSS ::slotted() représente n'importe quel élément ayant été placé à l'intérieur d'un emplacement (slot) au sein d'un gabarit (template) HTML (cf. Utiliser les gabarits et les emplacements pour plus d'informations).

Cela ne fonctionne que pour du CSS placé à l'intérieur d'un élément <template> et/ou dans le shadow DOM. On notera également que ce sélecteur ne sélectionnera pas les noeuds texte placés dans les emplacements, il ne cible que les éléments.

css
/* Cible n'importe quel élément placé dans un emplacement */
::slotted(*) {
  font-weight: bold;
}

/* Cible n'importe quel élément <span> placé dans un emplacement */
::slotted(span) {
  font-weight: bold;
}

Syntaxe

Error: could not find syntax for this item

Exemples

Les fragments de code suivants sont tirés du dépôt slotted-pseudo-element (voir le résultat en live).

Dans cette démonstration, on utilise un gabarit avec trois emplacements :

html
<template id="person-template">
  <div>
    <h2>Carte d'identité d'une personne</h2>
    <slot name="person-name">NOM ABSENT</slot>
    <ul>
      <li><slot name="person-age">AGE ABSENT</slot></li>
      <li><slot name="person-occupation">POSTE ABSENT</slot></li>
    </ul>
  </div>
</template>

Un élément personnalisé — <person-details> — est défini de la façon suivante :

js
customElements.define(
  "person-details",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("person-template");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });

      let style = document.createElement("style");
      style.textContent =
        "div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }" +
        "h2 { margin: 0 0 10px; }" +
        "ul { margin: 0; }" +
        "p { margin: 10px 0; }" +
        "::slotted(*) { color: gray; font-family: sans-serif; } ";

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);

On voit ici que, lorsqu'on renseigne le style de l'élément, on sélectionne tous les éléments présents dans les emplacements (::slotted(*)) afin de leur fournir différentes polices et couleurs. Cela permet d'avoir une meilleur vision des emplacements qui ne sont pas encore occupés.

Voici ce à quoi ressemblera l'élément lorsqu'il sera inséré dans la page :

html
<person-details>
  <p slot="person-name">Dr. Shazaam</p>
  <span slot="person-age">Immortel</span>
  <span slot="person-occupation">Super-héros</span>
</person-details>

Spécifications

Specification
CSS Scoping Module Level 1
# slotted-pseudo

Compatibilité des navigateurs

Voir aussi