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 指定为开放的封装模式。
  • closed 指定为关闭的封装模式。
delegatesFocus
A boolean that, when set to true, specifies behavior that mitigates custom element issues around focusability. When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling.

返回值

返回一个 ShadowRoot 对象或者 null

异常

异常 说明
InvalidStateError The element you are trying to attach to is already a shadow host.
NotSupportedError You are trying to attach a shadow root to an element outside the HTML namespace, or the element cannot have a shadow attached to it (see above).

示例

The following example is taken from our word-count-web-component demo (see it live also). You can see that we use attachShadow() in the middle of the code to create a shadow root, which we then attach our custom element's contents to.

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

    // count words in element's parent element
    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);

    // Create a shadow root
    var shadow = this.attachShadow({mode: 'open'});

    // Create text node and add word count to it
    var text = document.createElement('span');
    text.textContent = count;

    // Append it to the shadow root
    shadow.appendChild(text);

    // Update count when element content changes
    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 No support No
Notes
No support No
Notes
Notes Under consideration
Firefox 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 No support NoFirefox 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.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.