Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
Element.attachShadow()
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since enero de 2020.
* Some parts of this feature may have varying levels of support.
El métodoElement.attachShadow() adjunta un árbol DOM "sombra" al elemento especificado y devuelve una referencia a su raízShadowRoot.
Elementos a los que puedes adjuntar un DOM "sombra"
No se puede adjuntar un DOM "sombra" a cualquier tipo de elemento. Hay algunos que no pueden tenerlo por razones de seguridad (por ejemplo<a>), y algunos más. Los siguientes elementos de la listapueden adjuntar un DOM "sombra":
Syntaxis
var shadowroot = element.attachShadow(shadowRootInit);
Parámetros
shadowRootInitUn diccionario
ShadowRootInit, que puede contener los siguientes campos:modeUna cadena que especifique elmodo de encapsulación para el árbol DOM "sombra". Este puede tener uno de los siguientes valores:
open: Los elementos del árbol son accesibles desde fuera del elemento, por ejemplo usandoElement.shadowRoot:element.shadowRoot; // Returns a ShadowRoot obj
closed: Deniega el acceso a lo(s) nodo(s) desde fuera mediante #"#delegatesfocus">delegatesFocusUn booleano que, si se establece a
true, mitiga problemas de comportamiento relativos a la capacidad de tomar el foco. Cuando se hace click en una parte del DOM "sombra" que no puede tomar el foco, la primera parte del árbol que pueda tomar el foco lo hará, y le dará cualquier estilo disponible mediante CSS con:focus.
Valor retorno
Devuelve un objetoShadowRoot.
Excepciones
| Excepción | Explicación |
|---|---|
InvalidStateError | El elemento que estás intentando adjuntar ya tiene una DOM "sombra". |
NotSupportedError | Estás intentando adjuntar DOM "sombra" a un elemento fuera del espacio de nombres HTML, o el elemento no puede tener una DOM "sombra". adjunta (ver abajo). |
Ejemplos
Los siguientes ejemplos están tomados de la demoword-count-web-component (verlo también en modo live). Puedes ver que usamosattachShadow() en mitad del código para crear una DOM "sombra", a la que luego adjuntamos el contenido de nuesto elemento personalizado.
// Crear una clase para el elementoclass CuentaPalabras extends HTMLParagraphElement { constructor() { // Siemmpre llamar a super en el constructor super(); // contar las palabras en el nodo padre var cpPadre = this.parentNode; function cuentaPalabras(nodo) { var texto = nodo.innerText || nodo.textContent; return texto.trim().split(/\s+/g).length; } var cuenta = "Palabras: " + cuentaPalabras(cpPadre); // Crear un DOM "sombra" var sombra = this.attachShadow({ mode: "open" }); // Crear el nodo de texto y añadirle el contador de palabras var texto = document.createElement("span"); texto.textContent = count; // Añadirlo a la sombra sombra.appendChild(texto); // Actualizar el contador cuando el contenido del elemento cambie setInterval(function () { var cuenta = "Palabras: " + cuentaPalabras(cpPadre); texto.textContent = cuenta; }, 200); }}// Definir el nuevo elementocustomElements.define("cuenta-palabras", CuentaPalabras, { extends: "p" });Especificaciones
| Specification |
|---|
| DOM # dom-element-attachshadow |