Element.attachShadow()

This translation is incomplete. Please help translate this article from English

El método Element.attachShadow() adjunta un árbol DOM "sombra" al elemento especificado y devuelve una referencia a su raíz ShadowRoot.

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 lista pueden adjuntar un DOM "sombra":

Syntaxis

var shadowroot = element.attachShadow(shadowRootInit);

Parámetros

shadowRootInit
Un diccionario ShadowRootInit , que puede contener los siguientes campos:
mode

Una cadena que especifique el modo 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 usando Element.shadowRoot:
     
    element.shadowRoot; // Returns a ShadowRoot obj
  • closed: Deniega el acceso a lo(s) nodo(s) desde fuera mediante JavaScript:
     
    element.shadowRoot; // Returns null
    
delegatesFocus
Un 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 objeto ShadowRoot.

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 demo word-count-web-component  (verlo también en modo live). Puedes ver que usamos attachShadow() 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 elemento
class 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 elemento
customElements.define('cuenta-palabras', CuentaPalabras , { extends: 'p' });

Especificaciones

Specification Status Comment
DOM
La definición de 'attachShadow()' en esta especificación.
Living Standard

Compatibilidad navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
attachShadowChrome Soporte completo 53Edge Soporte completo 79Firefox Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 40Safari Soporte completo 10WebView Android Soporte completo 53Chrome Android Soporte completo 53Firefox Android Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 41Safari iOS Soporte completo 10Samsung Internet Android Soporte completo 6.0
delegatesFocus option of ShadowRootInit dictionary.
ExperimentalNo estándar
Chrome Soporte completo SiEdge Soporte completo 79Firefox Sin soporte NoIE Sin soporte NoOpera ? Safari ? WebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Sin soporte NoOpera Android ? Safari iOS ? Samsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
No estandar . Esperar poco soporte entre navegadores.
No estandar . Esperar poco soporte entre navegadores.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.