<slot>

L'élément HTML <slot> 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 aux composants web (Web Components).

Attributs

Cet élément inclut les attributs universels.

name

Le nom de l'emplacement créé.

A named slot is a <slot> element with a name attribute.

Exemples

Dans la suite de cette page, on illustre comment utiliser un élément <slot> avec l'élément <template>. On utilisera également des outils en JavaScript.

Utiliser <slot> avec <template>

Dans cet exemple, on veut :

• créer un élément <element-details> qui contient des emplacements nommés dans son shadow root
• concevoir l'élément <element-details> de telle façon que lorsqu'il est utilisé dans un document, il soit affiché en mélangeant les éléments de son contenu et celui de son shadow root—c'est-à-dire les le contenu des éléments utilisés pour remplir les emplacements nommés dans le shadow root.

Utiliser <slot> dans <template> afin de construire un fragment de document avec des emplacements nommés

Pour commencer, on utilise l'élément <slot> dans un élément <template> afin de créer un fragment de document intitulé element-details-template qui contient des emplacements nommés.

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

L'élément <template> contient ici plusieurs choses :

• Un élément <style> qui contient une mise en forme CSS qui s'applique au fragment de document créé par <template>.
• Trois exemplaires de <slot> et de l'attribut name qui permettent de créer trois emplacements nommés :
  • <slot name="element-name">
  • <slot name="description">
  • <slot name="attributes">
• Enfin, <template> enveloppe les emplacements nommés dans un élément <details>.

Créer un nouvel élément <element-details> à partir d'un élément <template>

Ensuite, on crée un nouvel élément <element-details> et on utilise la méthode Element.attachShadow pour l'attacher, en tant que shadow root, au fragment de document créé avec l'élément <template> ci-avant :

customElements.define('element-details',
  class extends HTMLElement {
    constructor() {
      super()
      var template = document
        .getElementById('element-details-template')
        .content
      const shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild(template.cloneNode(true))
  }
})

Utiliser l'élément spécifique <element-details> dans un emplacement nommé

Ici, on utilise enfin l'élément <element-details> dans notre document :

<element-details>
  <span slot="element-name">slot</span>
  <span slot="description">A placeholder inside a web
    component that users can fill with their own markup,
    with the effect of composing different DOM trees
    together.</span>
  <dl slot="attributes">
    <dt>name</dt>
    <dd>Le nom de l'emplacement.</dd>
  </dl>
</element-details>

<element-details>
  <span slot="element-name">template</span>
  <span slot="description">Un mécanisme qui permet de 
    contenir des informations côté client et qui ne sont
    pas affichées au chargement de la page mais qui peuvent
    être instantiées par la suite grâce à JavaScript.
  </span>
</element-details> 

Dans ce fragment code, on remarquera les points suivants :

• On a deux exemplaires d'éléments <element-details> qui utilisent tous les deux l'attribut slot afin de faire référence aux emplacements nommés "element-name" et "description" qui sont dans le shadow root de <element-details>
• Seul un de ces deux éléments <element-details> utilise l'emplacement nommé "attributes". Le second élément <element-details> n'a aucune référence envers l'emplacement nommé "attributes".
• Le premier élément <element-details> utilise l'emplacement nommé "attributes" avec un élément <dl> contenant des éléments <dt> et <dd>.

Une dernière touche de mise en forme

Pour conclure, on ajoute un peu de CSS pour mettre en forme les éléments <dl>, <dt> et <dd> de notre document.

  dl { margin-left: 6px; }
  dt { font-weight: bold; color: #217ac0; font-size: 110% }
  dt { font-family: Consolas, "Liberation Mono", Courier }
  dd { margin-left: 16px }

body { margin-top: 47px }

<!DOCTYPE html>
<html>
  <head>
    <title>slot example</title>
    <style>

      dl { margin-left: 6px; }
      dt { font-weight: bold; color: #217ac0; font-size: 110% }
      dt { font-family: Consolas, "Liberation Mono", Courier }
      dd { margin-left: 16px }

    </style>
  </head>
  <body>
    <template id="element-details-template">
      <style>
      details {font-family: "Open Sans Light",Helvetica,Arial}
      .name {font-weight: bold; color: #217ac0; font-size: 120%}
      h4 { margin: 10px 0 -8px 0; }
      h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
      h4 span { border: 1px solid #cee9f9; border-radius: 4px }
      h4 span { color: white }
      .attributes { margin-left: 22px; font-size: 90% }
      .attributes p { margin-left: 16px; font-style: italic }
      </style>
      <details>
        <summary>
          <span>
            <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code>
            <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
          </span>
        </summary>
        <div class="attributes">
          <h4><span>Attributes</span></h4>
          <slot name="attributes"><p>None</p></slot>
        </div>
      </details>
      <hr>
    </template>

    <element-details>
      <span slot="element-name">slot</span>
      <span slot="description">A placeholder inside a web
        component that users can fill with their own markup,
        with the effect of composing different DOM trees
        together.</span>
      <dl slot="attributes">
        <dt>name</dt>
        <dd>The name of the slot.</dd>
      </dl>
    </element-details>

    <element-details>
      <span slot="element-name">template</span>
      <span slot="description">A mechanism for holding client-
        side content that is not to be rendered when a page is
        loaded but may subsequently be instantiated during
        runtime using JavaScript.</span>
    </element-details>

    <script>
    customElements.define('element-details',
      class extends HTMLElement {
        constructor() {
          super();
          var template = document
            .getElementById('element-details-template')
            .content;
          const shadowRoot = this.attachShadow({mode: 'open'})
            .appendChild(template.cloneNode(true));
        }
      })
    </script>
  </body>
</html>

Résultat

En assemblant tout ce travail, on peut ainsi voir le résultat obtenu.

Screenshot	Live sample

En regardant ce résultat, on peut noter les points suivants :

• Bien que les instances de l'élément <element-details> n'utilisent pas directement l'élément <details>, elles sont affichées comme des éléments <details> car le shadow root les remplace avec cet élément.
• Au sein de l'élément <details> qui est produit, le contenu des éléments <element-details> est présent dans les emplacements nommés du shadow root. Autrement dit, l'arbre du DOM pour les éléments a été composé avec le contenu du shadow root.
• Pour les deux éléments <element-details>, un titre Attributs est automatiquement ajouté à partir du shadow root avant le contenu pour l'emplacement nommé "attributes".
• Le premier <element-details> contient un élément <dl> qui fait explicitement référence à l'emplacement nommé "attributes", c'est pourquoi, le contenu de cet élément <dl> remplace l'emplacement nommé "attributes" du shadow root.
• Pour le deuxième élément <element-details> qui ne contient aucune référence explique à l'emplacement nommé "attributes", c'est le contenu par défaut qui est utilisé pour remplir le contenu de l'emplacement nommé.

Spécifications

Compatibilité des navigateurs

Voir aussi

• <template>