---
title: <shadow>
slug: Web/HTML/Element/shadow
translation_of: Web/HTML/Element/shadow
original_slug: Web/HTML/Elemento/Shadow
---
<p>{{obsolete_header}}</p>

<p><span class="seoSummary">El <strong>HTML <code>&lt;shadow&gt;</code> element</strong>—es una parte absoluta de la suite tecnológica de <a href="/en-US/docs/Web/Web_Components">Web Components</a> —estaba destinado a ser utilizado como un shadow DOM {{glossary("insertion point")}}. Es posible que lo hayas usado si has creado varias root shadow bajo un shadow host. No es útil en HTML ordinario.</span></p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">Transparent content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parents</th>
   <td>Any element that accepts flow content.</td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>None</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLShadowElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>

<h2 id="Example">Example</h2>

<p>Aquí está un ejemplo simple usando el  <code>&lt;shadow&gt;</code> element. Es un archivo HTML con todo lo necesario en él.</p>

<div class="note">
<p><strong>Note:</strong> This is an experimental technology. For this code to work, the browser you display it in must support Web Components. See <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p>
</div>

<pre class="brush: html">&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;

  &lt;!-- This &lt;div&gt; will hold the shadow roots. --&gt;
  &lt;div&gt;
    &lt;!-- This heading will not be displayed --&gt;
    &lt;h4&gt;My Original Heading&lt;/h4&gt;
  &lt;/div&gt;

  &lt;script&gt;
    // Get the &lt;div&gt; above with its content
    var origContent = document.querySelector('div');
    // Create the first shadow root
    var shadowroot1 = origContent.createShadowRoot();
    // Create the second shadow root
    var shadowroot2 = origContent.createShadowRoot();

    // Insert something into the older shadow root
    shadowroot1.innerHTML =
      '&lt;p&gt;Older shadow root inserted by
          &amp;lt;shadow&amp;gt;&lt;/p&gt;';
    // Insert into younger shadow root, including &lt;shadow&gt;.
    // The previous markup will not be displayed unless
    // &lt;shadow&gt; is used below.
    shadowroot2.innerHTML =
      '&lt;shadow&gt;&lt;/shadow&gt; &lt;p&gt;Younger shadow
       root, displayed because it is the youngest.&lt;/p&gt;';
  &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>If you display this in a web browser it should look like the following.</p>

<p><img alt="shadow example" src="https://mdn.mozillademos.org/files/10083/shadow-example.png" style="height: 343px; width: 641px;"></p>

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

<p>This element is no longer defined by any specifications.</p>

<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>35</td>
   <td>{{CompatGeckoDesktop("28")}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>26</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>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>37</td>
   <td>{{CompatGeckoMobile("28")}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] If Shadow DOM is not enabled in Firefox, <code>&lt;shadow&gt;</code> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 33 and is behind a preference, <code>dom.webcomponents.enabled</code>, which is disabled by default.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li>
 <li>{{HTMLElement("content")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li>
</ul>

<div>{{HTMLRef}}</div>