?
This document uses PHP Chinese website manual Release
這是一項(xiàng) 實(shí)驗(yàn)技術(shù)
在使用此產(chǎn)品之前，請(qǐng)仔細(xì)檢查瀏覽器兼容性表。
Web組件技術(shù)套件的HTML<slot>元素 - 是Web組件中的一個(gè)占位符，您可以使用自己的標(biāo)記填充該標(biāo)記，從而可以創(chuàng)建單獨(dú)的DOM樹并將它們展示在一起。
內(nèi)容類別 | 流量?jī)?nèi)容，措辭內(nèi)容 |
|---|---|
允許的內(nèi)容 | 透明 |
標(biāo)記遺漏 | 沒有，起始和結(jié)束標(biāo)簽都是強(qiáng)制性的 |
允許父母 | 任何接受短語(yǔ)內(nèi)容的元素 |
允許ARIA角色 | 沒有 |
DOM界面 | HTMLSlotElement |
屬性
該元素包含全局屬性。
name插槽的名稱。已命名的插槽是<slot>具有name屬性的元素。
示例
讓我們用<slot>元素和<template>元素一起做一個(gè)例子。
<template>與<slot>合作
以下代碼片段集展示了如何將<slot>元素與<template>元素和一些JavaScript 一起使用來(lái)：
<element-details>在其陰影根中創(chuàng)建一個(gè)具有命名槽的元素<element-details>以這樣一種方式設(shè)計(jì)元素：在文檔中使用時(shí)，元素的內(nèi)容與其陰影根的內(nèi)容一起構(gòu)成- 也就是說(shuō)，元素內(nèi)容的片段用于填充其陰影根中的命名空位
使用<template>中的<slot>生成一個(gè)帶有命名槽的文檔片段
首先讓我們使用<slot>元素中的<template>元素來(lái)創(chuàng)建一個(gè)新的“元素細(xì)節(jié)模板” 文檔片段，其中包含一些命名的插槽。
<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"><<slot name="element-name">NEED NAME</slot>></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><template>元素有幾個(gè)特點(diǎn)：
<template>有一個(gè)<style>具有一組的作用域只是文件片段的CSS樣式元素<template>造成的。<template>用途<slot>和它的name屬性，使三個(gè)已命名的插槽：<slot name="element-name"><slot name="description"><slot name="attributes"><template>包裝在命名插槽<details>元素。
從<template>元素創(chuàng)建一個(gè)新的<element-details>元素
接下來(lái)，讓我們創(chuàng)建一個(gè)名為的新自定義元素，<element-details>并使用Element.attachShadow它作為其陰影根，附加到我們使用<template>上述元素創(chuàng)建的文檔片段。
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)); }})使用具有指定插槽的<element-details>自定義元素
現(xiàn)在我們來(lái)看看<element-details** > **元素，并在文檔中實(shí)際使用。
<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>
關(guān)于該片段，請(qǐng)注意以下幾點(diǎn)：
片段有兩個(gè)
<element-details>元素實(shí)例，它們都使用該slot屬性來(lái)引用指定的位置，"element-name"然后"description"放入<element-details>陰影根位置。只有這兩個(gè)
<element-details>元素中的第一個(gè)引用"attributes"指定的槽。第二個(gè)元素缺少對(duì)指定槽的引用。<element-details>"attributes"第一個(gè)
<element-details>元素"attributes"使用<dl>帶有<dt>和<dd>子元素的元素引用指定的槽。
添加最后一點(diǎn)風(fēng)格
畫龍點(diǎn)睛：為更多一點(diǎn)點(diǎn)CSS <dl>，<dt>以及<dd>在我們的文檔內(nèi)容。
dl { margin-left: 6px; }
dt { font-weight: bold; color: #217ac0; font-size: 110% }
dt { font-family: Consolas, "Liberation Mono", Courier }
dd { margin-left: 16px }結(jié)果
最后，讓我們將所有代碼片段放在一起，看看呈現(xiàn)的結(jié)果是什么樣子。
Screenshot | Live sample |
|---|---|
關(guān)于渲染結(jié)果，請(qǐng)注意以下幾點(diǎn)：
即使
<element-details>文檔中元素的實(shí)例不直接使用該<details>元素，也會(huì)使用它們進(jìn)行渲染，<details>因?yàn)橛白痈鶗?huì)導(dǎo)致它們被填充。在呈現(xiàn)的
<details>輸出中，<element-details>元素中的內(nèi)容將從影子根中填充指定的位置。換句話說(shuō)，來(lái)自<element-details>元素的DOM樹與影子根的內(nèi)容一起構(gòu)成。對(duì)于這兩個(gè)
<element-details>元素，Attributes標(biāo)題會(huì)自動(dòng)從指定插槽位置之前的影子根目錄添加"attributes"。因?yàn)榈谝?strong>
<element-details>有一個(gè)<dl>其中明確參考元件"attributes"命名槽從其影子根，的該內(nèi)容<dl>代替"attributes"從命名槽陰影根。因?yàn)榈诙€(gè)
<element-details>沒有明確地"attributes"從它的影子根中引用指定的槽，所以它的該指定槽的內(nèi)容被來(lái)自影子根的默認(rèn)內(nèi)容填充。
規(guī)范
規(guī)范 | 狀態(tài) | 評(píng)論 |
|---|---|---|
HTML Living Standard該規(guī)范中'<slot>'的定義。 | Living Standard | |
DOM在該規(guī)范中定義的“插槽”。 | Living Standard |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic Support | 53 | No | No | No | 40 | 10 |
name | 53 | No | No | No | 40 | 10 |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
Basic Support | 53 | 53 | No | No | No | 40 | 10.1 |
name | 53 | 53 | No | No | No | 40 | 10.1 |