Revision 1112753 of Element.attachShadow()

<p>{{APIRef('Shadow DOM')}}&nbsp;{{Non-standard_header}}</p>

<p>The <strong><code>Element.attachShadow()</code></strong> method attatches a shadow DOM tree to the specified element and returns a reference to its&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot" title="Use Element.attachShadow to create an instance of shadow DOM. When shadow DOM is created, it is always attached to an existing element. After the shadow DOM is created, the element that it is attached to is called the shadow root."><code>ShadowRoot</code></a>.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox">
var <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>); 
</pre>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><code>shadowRootInit</code></dt>
 <dd>A&nbsp;<code>ShadowRootInit</code> dictionary, having the following field:
 <ul>
  <li><code>mode</code>: A string&nbsp;specifying the <em>encapsulation mode</em> for the shadow DOM tree. One of:
   <ul>
    <li><code>open.&nbsp;</code>Specifies open encapsulation mode.</li>
    <li><code>closed.</code>&nbsp;Specifies closed encapsulation mode.</li>
   </ul>
  </li>
 </ul>
 </dd>
</dl>

<h3 id="Returns">Returns</h3>

<p>Returns a {{domxref("ShadowRoot")}}.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}}</td>
   <td>{{Spec2('Shadow DOM')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(53.0)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>