--- title: slug: Web/HTML/Element/Shadow tags: - Element - HTML - Reference - Web Components translation_of: Web/HTML/Element/shadow ---

Sumari

L'element HTML <shadow> s'utilitza com una ombra DOM {{glossary("insertion point")}}. És possible utilitzar-ho si s'han creat múltiples arrels d'ombra sota una ombra d'acollida. No és útil en HTML ordinari. S'utilitza amb Components Web (Web Components).

Categories de contingut Contingut transparent.
Contingut permès Contingut dinàmic.
Omissió de l'etiqueta {{no_tag_omission}}
Elements pares permesos Qualsevol element que accepti contingut dinàmic
Interfície DOM {{domxref("HTMLShadowElement")}}

Atributs

Aquest element inclou els atributs globals.

Exemple

Aquí teniu un exemple senzill de l'ús de l'element <shadow>. És un arxiu HTML amb tot el necessari.

Nota: Aquesta és una tecnologia experimental. Perquè aquest codi funcioni, el navegador que ho mostri ha de ser compatible amb els components web. Veure Habilitan components web en Firefox (Enabling Web Components in Firefox).

<html>
  <head></head>
  <body>

  <!-- This <div> will hold the shadow roots. -->
  <div>
    <!-- This heading will not be displayed -->
    <h4>My Original Heading</h4>
  </div>

  <script>
    // Get the <div> 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 =
      '<p>Older shadow root inserted by &lt;shadow&gt;</p>';
    // Insert into younger shadow root, including <shadow>.
    // The previous markup will not be displayed unless
    // <shadow> is used below.
    shadowroot2.innerHTML =
      '<shadow></shadow> <p>Younger shadow root, displayed because it is the youngest.</p>';
  </script>

  </body>
</html>

Si visualitzes això en un navegador web ha de ser similar al següent.

shadow example

Especificacions

Especificació Estat Comentari
{{SpecName('Shadow DOM', "#the-shadow-element", "shadow")}} {{Spec2('Shadow DOM')}}  

Navegadors compatibles

{{CompatibilityTable}}

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suport bàsic 35 {{CompatGeckoDesktop("28")}}[1] {{CompatNo}} 26 {{CompatNo}}
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suport bàsic 37 {{CompatGeckoMobile("28")}}[1] {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}}

[1] Si Shadow DOM no està activat en Firefox, l'element <shadow> es comportarà com {{domxref("HTMLUnknownElement")}}. Shadow DOM es va implementar per primera vegada a Firefox 33 i està darrere d'una preferència, dom.webcomponents.enabled, que està desactivat per defecte.

Veure

{{HTMLRef}}