1. Web
  2. CSS
  3. ::slotted()

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

::slotted()

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨janvier 2020⁩.

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 le DOM fantôme (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.

Exemple interactif

/* Ce CSS est appliqué à l'intérieur du shadow DOM. */

::slotted(.content) {
  background-color: aqua;
}

h2 ::slotted(span) {
  background: silver;
}

<template id="card-template">
  <div>
    <h2><slot name="caption">le titre va ici</slot></h2>
    <slot name="content">le contenu va ici</slot>
  </div>
</template>

<my-card>
  <span slot="caption">Erreur</span>
  <p class="content" slot="content">Échec de la construction !</p>
</my-card>

customElements.define(
  "my-card",
  class extends HTMLElement {
    constructor() {
      super();

      const template = document.getElementById("card-template");
      const shadow = this.attachShadow({ mode: "open" });
      shadow.appendChild(template.content.cloneNode(true));

      const elementStyle = document.createElement("style");
      elementStyle.textContent = `
        div {
          width: 200px;
          border: 2px dotted red;
          border-radius: 4px;
        }`;
      shadow.appendChild(elementStyle);

      const cssTab = document.querySelector("#css-output");
      const editorStyle = document.createElement("style");
      editorStyle.textContent = cssTab.textContent;
      shadow.appendChild(editorStyle);
      cssTab.addEventListener("change", () => {
        editorStyle.textContent = cssTab.textContent;
      });
    }
  },
);
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

css
::slotted(<compound-selector>) {
  /* ... */
}

Exemples

Mise en évidence des éléments dans les emplacements

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

html
<template id="person-template">
  <div>
    <h2>Carte d'identité</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>

Nous définissons l'élément personnalisé <person-details>. Dans ce cas, nous ajoutons des styles avec JavaScript, mais nous aurions pu les ajouter dans un bloc <style> au sein du <template> avec le même effet :

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.

Notre balisage comprend trois éléments personnalisés, dont un élément personnalisé avec un nom de slot invalide dans un ordre source différent de celui du <template> :

html
<person-details>
  <p slot="person-name">Wonder Woman</p>
  <span slot="person-age">Immortelle</span>
  <span slot="person-occupation">Super-héroïne</span>
</person-details>

<person-details>
  <p slot="person-name">Malala Yousafzai</p>
  <span slot="person-age">17</span>
  <span slot="person-occupation">Activiste</span>
</person-details>

<person-details>
  <span slot="person-age">44</span>
  <span slot="nom-demplacement-invalide">Voyageur temporel</span>
  <p slot="person-name">Dr. Who</p>
</person-details>

Result

Spécifications

Specification
CSS Scoping Module Level 1
# slotted-pseudo

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content