From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/_doublecolon_slotted/index.md | 120 ++++++++++++------------- 1 file changed, 56 insertions(+), 64 deletions(-) (limited to 'files/fr/web/css/_doublecolon_slotted/index.md') diff --git a/files/fr/web/css/_doublecolon_slotted/index.md b/files/fr/web/css/_doublecolon_slotted/index.md index 0737e7ba63..1f7e5f9bc4 100644 --- a/files/fr/web/css/_doublecolon_slotted/index.md +++ b/files/fr/web/css/_doublecolon_slotted/index.md @@ -1,54 +1,58 @@ --- title: '::slotted()' -slug: 'Web/CSS/::slotted' +slug: Web/CSS/::slotted tags: - CSS - Pseudo-element - Reference - Web -translation_of: 'Web/CSS/::slotted' +translation_of: Web/CSS/::slotted --- -
{{CSSRef}}
+{{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).

+Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-éléments) 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](/fr/docs/Web/Web_Components/Using_templates_and_slots) 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.

+Cela ne fonctionne que pour du CSS placé à l'intérieur d'un élément {{htmlelement("template")}} et/ou dans le _[shadow DOM](/fr/docs/Web/Web_Components/Using_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 */
+```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 */
+/* Cible n'importe quel élément  placé dans un emplacement */
 ::slotted(span) {
   font-weight: bold;
 }
-
+``` -

Syntax

+## Syntax {{csssyntax}} -

Exemples

+## Exemples -

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

+Les fragments de code suivants sont tirés du dépôt [`slotted-pseudo-element`](https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element) ([voir le résultat en _live_](https://mdn.github.io/web-components-examples/slotted-pseudo-element/)). -

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

+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>
+```html + +``` -

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

+Un élément personnalisé — `` — est défini de la façon suivante : -
customElements.define('person-details',
+```js
+customElements.define('person-details',
   class extends HTMLElement {
     constructor() {
       super();
@@ -67,43 +71,31 @@ translation_of: 'Web/CSS/::slotted'
       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

- - +}) +``` + +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 + +

Dr. Shazaam

+ Immortel + Super-héros + +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('CSS Scope', '#slotted-pseudo', '::slotted')}} | {{Spec2('CSS Scope')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.selectors.slotted")}} + +## Voir aussi + +- [Les composants web](/fr/docs/Web/Web_Components) -- cgit v1.2.3-54-g00ecf