::slotted()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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;
});
}
},
);
/* 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
::slotted(<compound-selector>) {
/* ... */
}
Exemples
Mise en évidence des éléments dans les emplacements
Dans cette démonstration, on utilise un gabarit avec trois emplacements :
<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 :
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> :
<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
Loading…
Voir aussi
:host:host():host-context():has-slotted- Le module de définition de la portée CSS
- L'attribut HTML
slot - L'élément HTML
<slot> - L'élément HTML
<template> - Les composants web