---
title: Element.attachShadow()
slug: Web/API/Element/attachShadow
translation_of: Web/API/Element/attachShadow
---
<p>{{APIRef('Shadow DOM')}} {{SeeCompatTable}}</p>

<p>La méthode <strong><code>Element.attachShadow()</code></strong> attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son <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">Syntaxe</h2>

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

<h3 id="Paramètres">Paramètres</h3>

<dl>
 <dt><code>shadowRootInit</code></dt>
 <dd>Un dictionnaire <code>ShadowRootInit</code>, avec les propriétés suivantes :
 <ul>
  <li><code>mode </code>: une chaîne de caractères spécifiant le <em>mode d'encapsulation</em> de l'arbre du Shadow DOM, parmi les options suivantes :
   <ul>
    <li><code>open : </code>spécifie une encapsulation ouverte.</li>
    <li><code>closed</code> : spécifie une encapsulation fermée.</li>
   </ul>
  </li>
 </ul>
 </dd>
</dl>

<h3 id="Retour">Retour</h3>

<p>Retourne un {{domxref("ShadowRoot")}}.</p>

<h2 id="Spécifications">Spécifications</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>Définition initiale.</td>
  </tr>
 </tbody>
</table>

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

<p>{{Compat("api.Element.attachShadow")}}</p>