©
Dieses Dokument verwendetPHP-Handbuch für chinesische WebsitesFreigeben
这是一项实验技术
在使用此产品之前,请仔细检查浏览器兼容性表。
Web组件技术套件的HTML
元素- 是Web组件中的一个占位符,您可以使用自己的标记填充该标记,从而可以创建单独的DOM树并将它们展示在一起。
内容类别 |
流量内容,措辞内容 |
---|---|
允许的内容 |
透明 |
标记遗漏 |
没有,起始和结束标签都是强制性的 |
允许父母 |
任何接受短语内容的元素 |
允许ARIA角色 |
没有 |
DOM界面 |
HTMLSlotElement |
该元素包含全局属性。
name
插槽的名称。已命名的插槽是
具有name
属性的元素。
让我们用
元素和元素一起做一个例子。
以下代码片段集展示了如何将
元素与元素和一些JavaScript 一起使用来:
在其阴影根中创建一个具有命名槽的元素
以这样一种方式设计元素:在文档中使用时,元素的内容与其阴影根的内容一起构成- 也就是说,元素内容的片段用于填充其阴影根中的命名空位
首先让我们使用
元素中的元素来创建一个新的“元素细节模板” 文档片段,其中包含一些命名的插槽。
<
NEED NAME >NEED DESCRIPTION Attributes
None
元素有几个特点:
有一个
具有一组的作用域只是文件片段的CSS样式元素
造成的。
用途
和它的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"
第一个<element-details>
元素"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"
命名槽从其影子根,的该内容
代替"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 |