files/fr/web/html/element/slot/index.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

---
title: <slot>
slug: Web/HTML/Element/slot
tags:
  - Composant web
  - Element
  - HTML
  - Reference
  - Web
  - shadow dom
translation_of: Web/HTML/Element/slot
---
<div>{{HTMLRef}}</div>

<p>L'élément HTML <strong><code>&lt;slot&gt;</code></strong> représente un emplacement d'un composant web qu'on peut remplir avec son propre balisage. On peut ainsi obtenir un document construit avec différents arbres DOM. Cet élément fait partie des outils relatifs <a href="/fr/docs/Web/Web_Components">aux composants web (Web Components)</a>.</p>

<h2 id="Attributs">Attributs</h2>

<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>

<dl>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd><p>Le nom de l'emplacement créé.</p>
 <p>Un <strong><dfn>« slot » nommé</dfn></strong> est un élément <code>&lt;slot&gt;</code> avec un attribut <code>name</code>.</p></dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<pre class="brush: html">&lt;template id="element-details-template"&gt;
  &lt;style&gt;
    details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif }
    .name {font-weight: bold; color: #217ac0; font-size: 120% }
    h4 {
      margin: 10px 0 -8px 0;
      background: #217ac0;
      color: white;
      padding: 2px 6px;
      border: 1px solid #cee9f9;
      border-radius: 4px;
    }
    .attributes { margin-left: 22px; font-size: 90% }
    .attributes p { margin-left: 16px; font-style: italic }
  &lt;/style&gt;
  &lt;details&gt;
    &lt;summary&gt;
      &lt;code class="name"&gt;&amp;lt;&lt;slot name="element-name"&gt;Remplacer ce nom&lt;/slot&gt;&amp;gt;&lt;/code&gt;
      &lt;i class="desc"&gt;&lt;slot name="description"&gt;Remplacer cette description&lt;/slot&gt;&lt;/i&gt;
    &lt;/summary&gt;
    &lt;div class="attributes"&gt;
      &lt;h4&gt;Attributs&lt;/h4&gt;
      &lt;slot name="attributes"&gt;&lt;p&gt;Aucun&lt;/p&gt;&lt;/slot&gt;
    &lt;/div&gt;
  &lt;/details&gt;
  &lt;hr&gt;
&lt;/template&gt;</pre>

<div class="note">
<p><strong>Note :</strong> Vous pouvez retrouver cet exemple sur <a href="https://github.com/mdn/web-components-examples/tree/master/element-details">ce dépôt GitHub</a> et observer <a href="https://mdn.github.io/web-components-examples/element-details/">son fonctionnement en live ici</a>. Une explication plus détaillée est également disponible avec l'article <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Manipuler <code>template</code> et <code>slot</code></a>.</p>
</div>

<h2 id="Résumé_technique">Résumé technique</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
  </tr>
  <tr>
   <th scope="row">Contenu autorisé</th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent">Contenu transparent</a>.</td>
  </tr>
  <tr>
   <th scope="row">Évènements</th>
   <td>{{event("slotchange")}}</td>
  </tr>
  <tr>
   <th scope="row">Omission de balises</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Parents autorisés</th>
   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"> contenu phrasé</a>.</td>
  </tr>
  <tr>
   <th scope="row">Rôles ARIA autorisés</th>
   <td>Aucun.</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLSlotElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG','scripting.html#the-slot-element','&lt;slot&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("html.elements.slot")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{HTMLElement("template")}}</li>
</ul>