slot
这是一项 实验技术
在使用此产品之前,请仔细检查浏览器兼容性表。
Web组件技术套件的HTML元素 - 是Web组件中的一个占位符,您可以使用自己的标记填充该标记,从而可以创建单独的DOM树并将它们展示在一起。
内容类别
流量内容,措辞内容
允许的内容
透明
标记遗漏
没有,起始和结束标签都是强制性的
允许父母
任何接受短语内容的元素
允许ARIA角色
没有
DOM界面
HTMLSlotElement
属性
该元素包含全局属性。
name插槽的名称。已命名的插槽是具有name属性的元素。
示例
让我们用元素和元素一起做一个例子。
与合作
以下代码片段集展示了如何将元素与元素和一些JavaScript 一起使用来:
在其阴影根中创建一个具有命名槽的元素
以这样一种方式设计元素:在文档中使用时,元素的内容与其阴影根的内容一起构成- 也就是说,元素内容的片段用于填充其阴影根中的命名空位
使用中的生成一个带有命名槽的文档片段
首先让我们使用元素中的元素来创建一个新的“元素细节模板” 文档片段,其中包含一些命名的插槽。
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 }
<NEED NAME>
NEED DESCRIPTION
Attributes
None
元素有几个特点:
有一个
用途和它的name属性,使三个已命名的插槽:
包装在命名插槽元素。
从元素创建一个新的元素
接下来,让我们创建一个名为的新自定义元素,并使用Element.attachShadow它作为其阴影根,附加到我们使用上述元素创建的文档片段。
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));
}
})
使用具有指定插槽的自定义元素
现在我们来看看 **元素,并在文档中实际使用。
slot
A placeholder inside a web
component that users can fill with their own markup,
with the effect of composing different DOM trees
together.
name The name of the slot.template
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.
关于该片段,请注意以下几点:
片段有两个元素实例,它们都使用该slot属性来引用指定的位置,"element-name"然后"description"放入 阴影根位置。
只有这两个元素中的第一个引用"attributes"指定的槽。第二个元素缺少对指定槽的引用。"attributes"
第一个元素"attributes"使用
-
和
- 子元素的元素引用指定的槽。
添加最后一点风格
画龙点睛:为更多一点点CSS
-
以及
-
在我们的文档内容。
dl { margin-left: 6px; }
dt { font-weight: bold; color: #217ac0; font-size: 110% }
dt { font-family: Consolas, "Liberation Mono", Courier }
dd { margin-left: 16px }
结果
最后,让我们将所有代码片段放在一起,看看呈现的结果是什么样子。
Screenshot
Live sample
关于渲染结果,请注意以下几点:
即使文档中元素的实例不直接使用该元素,也会使用它们进行渲染,因为影子根会导致它们被填充。
在呈现的输出中,元素中的内容将从影子根中填充指定的位置。换句话说,来自元素的DOM树与影子根的内容一起构成。
对于这两个元素,Attributes标题会自动从指定插槽位置之前的影子根目录添加"attributes"。
因为第一有一个
因为第二个没有明确地"attributes"从它的影子根中引用指定的槽,所以它的该指定槽的内容被来自影子根的默认内容填充。
规范
规范
状态
评论
HTML Living Standard该规范中''的定义。
Living Standard
DOM在该规范中定义的“插槽”。
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