W3cubDocs

element.attachShadow

The 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>

Syntax

var shadowroot = element.attachShadow(shadowRootInit);

Parameters

shadowRootInit

A ShadowRootInit dictionary, which can contain the following field:

mode: A string specifying the encapsulation mode for the shadow DOM tree. This can be one of:

open: Elements of the shadow root are accessible from JavaScript outside the root, for example using Element.shadowRoot:
```
element.shadowRoot; // Returns a ShadowRoot obj
```
closed: Denies access to the node(s) of a closed shadow root from JavaScript outside it:
```
element.shadowRoot; // Returns null
```

Return value

Returns a ShadowRoot object or null.

Exceptions

Exception	Explanation
`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).

Examples

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.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' });

Specifications

Specification	Status	Comment
DOM The definition of 'attachShadow()' in that specification.	Living Standard

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	53	No No Under consideration	63 63 59 Disabled See bug 1205323 Disabled From version 59: 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	40	10

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	53	53	No No Under consideration	63 63 59 Disabled See bug 1205323 Disabled From version 59: this feature is behind the `dom.webcomponents.shadowdom.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	40	10	?

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/element/attachShadow