Le pseudo-élément CSS ::slotted() représente ni'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.

/* 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;
}

Syntax

::slotted( <compound-selector-list> )


<compound-selector-list> = <compound-selector>#


<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!


<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'


<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'


<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i

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 :

<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 :

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 :

<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

Spécification État Commentaires
CSS Scoping Module Level 1
La définition de '::slotted' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 50Edge ? Firefox Support complet 63
Support complet 63
Support complet 59
Désactivée
Désactivée From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 37Safari Support complet OuiWebView Android Support complet 50Chrome Android Support complet 50Edge Mobile ? Firefox Android Support complet 63
Support complet 63
Support complet 59
Désactivée
Désactivée From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 37Safari iOS Support complet OuiSamsung Internet Android Support complet 5.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, tonybengue
Dernière mise à jour par : SphinxKnight,