From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/api/element/attachshadow/index.html | 158 +++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 files/es/web/api/element/attachshadow/index.html (limited to 'files/es/web/api/element/attachshadow') diff --git a/files/es/web/api/element/attachshadow/index.html b/files/es/web/api/element/attachshadow/index.html new file mode 100644 index 0000000000..33e1d119ae --- /dev/null +++ b/files/es/web/api/element/attachshadow/index.html @@ -0,0 +1,158 @@ +--- +title: Element.attachShadow() +slug: Web/API/Element/attachShadow +translation_of: Web/API/Element/attachShadow +--- +
{{APIRef('Shadow DOM')}}
+ +

El método Element.attachShadow() adjunta un árbol DOM "sombra" al elemento especificado y devuelve una referencia a su raíz {{domxref("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 {{htmlelement("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 {{domxref("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 {{domxref("ShadowRoot")}}.

+ +

Excepciones

+ + + + + + + + + + + + + + + + + + +
ExcepciónExplicación
InvalidStateErrorEl elemento que estás intentando adjuntar ya tiene una DOM "sombra".
NotSupportedErrorEstá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

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilidad navegadores

+ + + +

{{Compat("api.Element.attachShadow")}}

-- cgit v1.2.3-54-g00ecf