Element.attachShadow()

翻译不完整。 请帮助我们翻译这篇文章！

Element.attachShadow() 方法给指定的元素挂载一个Shadow DOM，并且返回对 ShadowRoot 的引用。

可以被挂载的shadow DOM元素

要注意的是，不是每一种类型的元素都可以附加到shadow root（影子根）下面。出于安全考虑，一些元素不能使用 shadow DOM（例如<a>），以及许多其他的元素。下面是一个可以挂载 shadow root 的元素列表：

语法

var shadowroot = element.attachShadow(shadowRootInit);

参数

shadowRootInit
一个 ShadowRootInit 字典，包括下列字段：
mode 模式

指定 Shadow DOM 树封装模式的字符串，可以是以下值：

  • open shadow root元素可以从js外部访问根节点，例如使用 Element.shadowRoot:
element.shadowRoot; // 返回一个ShadowRoot对象
  • closed 拒绝从js外部访问关闭的shadow root节点
element.shadowRoot; // 返回null
delegatesFocus 焦点委托
一个布尔值, 当设置为 true 时, 指定减轻自定义元素的聚焦性能问题行为.
当shadow DOM中不可聚焦的部分被点击时, 让第一个可聚焦的部分成为焦点, 并且shadow host（影子主机）将提供所有可用的 :focus 样式.

返回值

返回一个 ShadowRoot 对象或者 null。

异常

异常 说明
InvalidStateError
无效状态错误		 您添加的元素已经是一个shadow host（影子主机）.

NotSupportedError
不被支持错误

 您应该添加 HTML 元素的命名空间之外的shadow root, 或者这个元素不能有其他shadow挂载到它上面 (见上).

示例

下面的例子取至 word-count-web-component 片段( 现场看看 ). 你可以看到使用 attachShadow() 在代码中间创建一个shadow root, 然后我们可以将自定义元素的内容挂载添加到它上面。

// 为新元素创建一个类
class WordCount extends HTMLParagraphElement {
  constructor() {
    // 在构造器中先调用一下 super
    super();

    // 计数器指向元素的父级
    var wcParent = this.parentNode;

    function countWords(node){
      var text = node.innerText || node.textContent
      return text.trim().split(/\s+/g).length;
    }

    var count = 'Words: ' + countWords(wcParent);

    // 创建一个shadow root
    var shadow = this.attachShadow({mode: 'open'});

    // 创建文本节点并向其添加计数器
    var text = document.createElement('span');
    text.textContent = count;

    // 将其添加到shadow root上
    shadow.appendChild(text);

    // 当元素内容发生变化时更新计数
    setInterval(function() {
      var count = 'Words: ' + countWords(wcParent);
      text.textContent = count;
    }, 200);
  }
}

// 定义新元素
customElements.define('word-count', WordCount, { extends: 'p' });

规范

标准 状态 备注
DOM
attachShadow()		 Living Standard

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
attachShadowChrome Full support 53Edge Full support 79Firefox Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (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.
IE No support NoOpera Full support 40Safari Full support 10WebView Android Full support 53Chrome Android Full support 53Firefox Android Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (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.
Opera Android Full support 41Safari iOS Full support 10Samsung Internet Android Full support 6.0
delegatesFocus option of ShadowRootInit dictionary.
ExperimentalNon-standard
Chrome Full support YesEdge Full support 79Firefox No support NoIE No support NoOpera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android No support NoOpera Android ? Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
User must explicitly enable this feature.
User must explicitly enable this feature.