HTML <slot>用法及代碼示例

插槽是 Web 組件技術的元素部分，它是組件內的占位符，您可以簡單地用自己的標記填充它，它允許您創建單獨的 DOM 樹並將它們一起表示。

用法:

<slot>
    <h1>Heading</h1>
</slot>

屬性：

name:它描述了插槽的名稱。

方法：在下麵給出的示例代碼中使用了以下元素。

Template:模板元素用於聲明將通過腳本插入到文檔中的 HTML 片段。在將內容添加到腳本中的文檔之前，不會呈現內容。這通常是包含 <slot> 元素的部分。
Content:這部分包含插入到模板中 <slot> 元素所在位置的內容。所以在這種情況下，span 元素會發現自己在哪裏可以找到元素。每個 span 元素通過其 slot 屬性引用一個選定的 <slot> 元素。您簡單地包含在模板元素中的任何 CSS 僅應用於 DOM 樹。它不會影響頁麵的其餘部分。
Script:主列表插入 <slot> 元素，但第二個列表沒有。主要樣式在模板元素中聲明，這表明它們僅適用於該影子 DOM 樹中的 HTML 元素。如果樣式在模板元素之外，則這些樣式僅應用於第二個列表，因此第一個列表沒有樣式。

例：

HTML


<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        h1 {
            font-size:2.2em;
            font-family:Arial, Helvetica, sans-serif;
            color:coral;
        }
  
        dl {
            border-left:5px solid yellowgreen;
            padding-left:1em;
        }
  
        dt {
            font-weight:bold;
            font-size:2em;
        }
  
        dd {
            color:darkslategray;
            font-size:1.6em;
        }
    </style>
</head>
  
<body>
    <template>
        <h1>
            <slot name="heading"></slot>
        </h1>
        <dl>
            <dt>
                <slot name="parent-1"></slot>
            </dt>
            <dd>
                <slot name="child-1"></slot>
            </dd>
            <dt>
                <slot name="parent-2"></slot>
            </dt>
            <dd>
                <slot name="child-2"></slot>
            </dd>
        </dl>
    </template>
  
    <section>
        <span slot="heading">GeeksforGeeks</span>
        <span slot="parent-1">GFG</span>
        <span slot="child-1">
            A computer science portal for geeks
        </span>
        <span slot="parent-2">Slot tag</span>
        <span slot="child-2">
            Create separate DOM trees and present them together.
        </span>
    </section>
      
    <script>
        let dlTemplate = document.querySelector('template').content;
        let sections = document.querySelectorAll('section');
  
        sections.forEach(function (section) {
            section.attachShadow({ mode:'open' }).appendChild(
                dlTemplate.cloneNode(true))
        });
    </script>
</body>
  
</html>

輸出：

支持的瀏覽器：

Chrome
Edge
Firefox
Brave
Opera
Safari
IE瀏覽器

相關用法

注：本文由純淨天空篩選整理自gurjeetsinghvirdee大神的英文原創作品 HTML <slot> Tag。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。