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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。