From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/_doublecolon_slotted/index.html | 111 +++++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 files/fr/web/css/_doublecolon_slotted/index.html (limited to 'files/fr/web/css/_doublecolon_slotted') diff --git a/files/fr/web/css/_doublecolon_slotted/index.html b/files/fr/web/css/_doublecolon_slotted/index.html new file mode 100644 index 0000000000..503d42dbf9 --- /dev/null +++ b/files/fr/web/css/_doublecolon_slotted/index.html @@ -0,0 +1,111 @@ +--- +title: '::slotted()' +slug: 'Web/CSS/::slotted' +tags: + - CSS + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::slotted' +--- +
{{CSSRef}}
+ +

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 {{htmlelement("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

+ +
{{csssyntax}}
+ +

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ÉtatCommentaires
{{SpecName('CSS Scope', '#slotted-pseudo', '::slotted')}}{{Spec2('CSS Scope')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.slotted")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf