Élément HTML «Slot» pour les composants Web

Slot est un espace réservé utilisé pour insérer du contenu personnalisé dans les composants Web. 1. La machine à sous par défaut implémente l'insertion de contenu unique via la balise <slot>; 2. Le créneau nommé utilise l'attribut de nom pour distinguer plusieurs positions de machines à sous pour améliorer la clarté structurelle; 3. Le contenu de l'emplacement est analysé dans la portée des parents. Le style n'affecte pas le contenu de l'emplacement par défaut, mais peut être contrôlé par :: slotted (); 4. Le contenu alternatif peut être défini et plusieurs emplacements dans le composant pour améliorer la flexibilité des composants.

L'utilisation d'éléments slot HTML rend très pratique d'insérer du contenu personnalisé dans les composants Web. C'est comme un "espace réservé", permettant aux développeurs de placer du contenu transmis de l'extérieur à un emplacement spécifié à l'intérieur du composant.

Qu'est-ce que l'emplacement?

Autrement dit, <slot></slot> fait partie de la technologie des composants Web pour insérer du contenu dans des éléments personnalisés. Si vous avez écrit sur la fonction de machine à sous de React ou Vue, vous devriez être familier avec ce concept. La balise Native <slot></slot> est la base de l'implémentation de fonctions similaires.

Par exemple, vous avez écrit un composant appelé <my-card></my-card> , et lorsque vous l'utilisez, vous souhaitez y mettre un paragraphe ou d'autres éléments:

 <my-carte>
  <p> C&#39;est le contenu de la carte </p>
</ my-carte>

Pour le moment, s'il n'y a pas de <slot> dans <my-card> , ces contenus ne seront pas affichés. Après avoir ajouté <slot> , le navigateur sait où mettre ce contenu.

Comment utiliser la fente par défaut?

La façon la plus simple de l'utiliser est de mettre une balise <slot> dans votre modèle de composant:

 <template id = "card-template">
  <style>
    .carte {
      Border: 1px solide #ccc;
      rembourrage: 10px;
    }
  </ style>
  <div class = "card">
    <slot> </slot>
  </div>
</ template>

De cette façon, tout le contenu placé entre <my-card> sera inséré dans <slot> .

• S'il n'y a pas de contenu, l'emplacement est vide.
• S'il y a plusieurs nœuds, ils seront insérés ensemble.

Cette méthode convient aux situations où un seul emplacement est nécessaire, également appelé "emplacement par défaut".

Des emplacements nommés pour rendre la structure plus claire

Lorsque vous souhaitez insérer plusieurs zones de contenu différentes dans un composant, vous pouvez utiliser des emplacements nommés. Par exemple, une carte peut avoir un titre, un corps et une zone de fonctionnement inférieure.

name dans HTML peut distinguer différents emplacements:

 <template id = "card-template">
  <div class = "card">
    <en-tête> <slot name = "header"> </slot> </-header>
    <andison> <slot> </slot> </-main>
    <footer> <slot name = "footer"> </slot> </footer>
  </div>
</ template>

Ensuite, lorsque vous utilisez le composant, écrivez ceci:

 <my-carte>
  <h1 slot = "header"> Je suis le titre </h1>
  <p> c&#39;est le contenu principal </p>
  <Button Slot = "Footer"> Afficher les détails </fontificateurs>
</ my-carte>

De cette façon, chaque pièce peut être insérée avec précision dans la position correspondante. Particulièrement adapté aux composants de mise en page ou aux modules d'interface utilisateur réutilisables.

Plusieurs précautions courantes

• Portée du contenu de l'emplacement : le contenu dans la fente est analysé dans la portée des parents, non interne au composant.
• Contrôle de style : les styles du composant n'affecteront pas le contenu de la fente à moins que le pseudo-classe ::slotted() ne soit utilisé.
• Contenu alternatif : vous pouvez écrire du contenu par défaut au milieu de la balise de slot, et il sera affiché si l'utilisateur ne passe pas le contenu.

Par exemple:

 <slot> Contenu par défaut </slot>

• Imbriqué avec plusieurs emplacements : un composant peut avoir plusieurs emplacements, mais éviter de nicher trop profond, sinon il sera gênant à maintenir.

Fondamentalement, c'est tout. L'utilisation slot peut rendre votre composant Web plus flexible et puissant. Bien qu'il semble simple, il est particulièrement utile lors de la construction de composants réutilisables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!