HTML slot属性用法及代码示例

HTML <slot> 元素允许用户创建影子 DOM(文档对象模型)。影子树是按特定顺序排列的元素的集合。如果用户需要经常创建具有相同结构的 Web 组件，他们可以使用 <slot> 元素创建阴影树。简而言之，<slot> HTML 元素是一个 Web 组件，它是一个占位符，放置在 Web 组件内，便于用自己的选择填充构成，这将有助于创建单独的 DOM 树并将它们一起表示。用户可以使用模板标签创建影子树。在这里，影子树的结构保持不变，但用户可以在特定插槽位置添加任何 HTML 元素。

用户可以使用其名称属性访问模板中的特定插槽。以下语法描述了 <slot> 元素：

用法:

<slot name='exampleSlot'></slot>

属性：<slot> 元素包括以下属性：

name:它定义了影子树中特定槽的名称。它应该是独一无二的。
Class：访问样式表中的特定插槽。

我们可以从影子树中访问上面的 slot 元素，如下所示：

<h1 slot='exampleSlot'>GeeksforGeeks</h1>

我们可以使用 name 属性使任何 HTML 元素适合插槽位置。

这个例子说明了浏览器是如何解析 <slot> 元素的：

 <div class="website">
  <div class="webpage">
    <h1 slot="webpageName">GeeksforGeeks</h1>
  </div>
  <div>
    <h3 slot="webpageDesc">Computer science portal</h3>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" 
           slot="webpageImage">
  </div>
</div>

在浏览器中，以下 HTML 代码的行为类似于此图示代码。通过向元素添加插槽属性，我们为影子树中的该元素提供了一个插槽。如您所见，它适合阴影树中的特定插槽。

例：这个例子描述了 slot 属性的基本用法。

HTML


<!DOCTYPE html>
<html>
  
<head>
    <title>Slot element</title>
</head>
  
<body>
    <div class="website">
        <div class="webpage">
              
            <!--Creating slot element-->
            <slot name="webpageName"></slot>
        </div>
        <div>
            <slot name="webpageDesc"></slot>
            <slot name="webpageImage"></slot>
        </div>
    </div>
    <user-data>
          
        <!--Accessing the slot element by name 
      and adding markup elements-->
        <h1 slot="webpageName">GeeksforGeeks</h1>
        <h3 slot="webpageDesc">Computer science portal</h3> 
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" 
                 slot="webpageImage"> 
    </user-data>
</body>
  
</html>

输出：对于输出，将元素安装在阴影树中。

支持的浏览器：<slot> 元素支持以下浏览器。

Chrome
Firefox
微软边
Safari
Opera

相关用法

注：本文由纯净天空筛选整理自shubhamvora05大神的英文原创作品 HTML slot Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。