HTMLSlotElement.name

 元素HTMLSlotElementname属性, 可以获取和设置属性值. 插槽提供了web组件的摆放位置,辅助用户布局。

语法

var name = htmlSlotElement.name
htmlSlotElement.name = name

一个 DOMString.

例子

下面的片段来自 slotchange example (see it live also).

let slots = this.shadowRoot.querySelectorAll('slot');
slots[1].addEventListener('slotchange', function(e) {
  let nodes = slots[1].assignedNodes();
  console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".');
});

这里我们获取所有插槽的引用, 然后给模板里的第二个插槽增加事件— 跟踪内容变化.

每当附加在插槽中的内容变化, 我们都记录插槽相关的内容.

规格

规格 状态 注释
HTML Living Standard
name
Living Standard  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 53Edge No support No
Notes
No support No
Notes
Notes Under consideration
Firefox Full support 63
Full support 63
No support 59 — 65
Disabled
Disabled From version 59 until version 65 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 40Safari Full support 10.1WebView Android Full support 53Chrome Android Full support 53Edge Mobile No support No
Notes
No support No
Notes
Notes Under consideration
Firefox Android Full support 63
Full support 63
No support 59 — 65
Disabled
Disabled From version 59 until version 65 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 40Safari iOS Full support 10.1Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

文档标签和贡献者

此页面的贡献者: codeex
最后编辑者: codeex,