Element.attachShadow()

在此页

Elements you can attach a shadow to
句法
范例
规范
浏览器兼容性
相关话题

Element.attachShadow() method attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot .

Elements you can attach a shadow to

Note that you can't attach a shadow root to every type of element. There are some that can't have a shadow DOM for security reasons (for example <a> ), and more besides. The following is a list of elements you can attach a shadow root to:

Any autonomous custom element with a valid name
<article>
<aside>
<blockquote>
<body>
<div>
<footer>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<header>
<main>
<nav>
<p>
<section>
<span>

句法

var shadowroot = element.attachShadow(shadowRootInit);

参数

shadowRootInit


								ShadowRootInit

dictionary, which can contain the following fields:

mode

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 对象。

异常

异常	解释
`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.

// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    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)
  }
}
// Define the new element
customElements.define('word-count', WordCount, { extends: 'p' });

规范

规范	状态	注释
DOM The definition of 'attachShadow()' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`attachShadow`	Chrome 53	Edge 79	Firefox 63 63 不支持 59 — 63 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera 40	Safari 10	WebView Android 53	Chrome Android 53	Firefox Android 63 63 不支持 59 — 63 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 41	Safari iOS 10	Samsung Internet Android 6.0
`delegatesFocus` option of `ShadowRootInit` 字典。非标	Chrome Yes	Edge 79	Firefox No	IE No	Opera ?	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android No	Opera Android ?	Safari iOS ?	Samsung Internet Android Yes

图例

完整支持
不支持
兼容性未知 ?
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
用户必须明确启用此特征。

元数据

最后修改： Mar 27, 2020

在此页

Elements you can attach a shadow to

句法

参数

返回值

异常

范例

规范

浏览器兼容性

图例

相关话题