Tutoriales En Linea Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Entretenimiento
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • Panel opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Panel Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
  • Webmasters
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook Twitter YouTube Instagram Linkedin
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Tutoriales En Linea Tutoriales En Linea
  • Secciones
    1. Android
    2. Adobe
    3. Bricolaje
    4. Bachillerato
    5. Cursos
    6. Criptomonedas
    7. Criptografia
    1. Diseño Web
    2. Encuestas
    3. Empleo
    4. Electricidad
    5. Electronica
    6. Forex
    7. Fisica
    1. Google
    2. Hardware
    3. Herramientas Ofimaticas
    4. Herramientas
    5. Internet
    6. Idiomas
    7. IPTV
    1. Lenguajes De Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Webmasters
    7. Ver todas las categorias
  • Smartphone
    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

    Compartir archivos entre Windows y Android nunca fue tan fácil con Near Share

    Compartir archivos entre Windows y Android nunca fue tan fácil con Near Share

    ¿Cómo afecta la tecnología a nuestra vida social?

    ¿Cómo afecta la tecnología a nuestra vida social?

    Aumenta tu productividad con el procesador HUAWEI P60 Pro

    Aumenta tu productividad con el procesador HUAWEI P60 Pro

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo
    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

    Compartir archivos entre Windows y Android nunca fue tan fácil con Near Share

    Compartir archivos entre Windows y Android nunca fue tan fácil con Near Share

    ¿Cómo afecta la tecnología a nuestra vida social?

    ¿Cómo afecta la tecnología a nuestra vida social?

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Historia de los sistemas operativos

    Historia de los sistemas operativos

    Como eliminar las aplicaciones predeterminadas de Windows 10 y 11

    Como eliminar las aplicaciones predeterminadas de Windows 10 y 11

    Intel está paulatinamente descontinuando numerosos procesadores de su 11.ª generación

    Intel está paulatinamente descontinuando numerosos procesadores de su 11.ª generación

    Cómo instalar un servidor web en tu ordenador con XAMPP

    Cómo instalar un servidor web en tu ordenador con XAMPP

    ¿Cómo Hackear Una Cuenta de Gmail de Otra Persona?

    ¿Cómo Hackear Una Cuenta de Gmail de Otra Persona?

    Como activar Windows 10 con KMSAuto

    Como activar Windows 10 con KMSAuto

    Tutorial de administrador de Salesforce: paso a paso

    Tutorial de administrador de Salesforce: paso a paso

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Benefits Of Vertical Dual Monitors For Coding And Programming

    Benefits Of Vertical Dual Monitors For Coding And Programming

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    Aumenta el rendimiento de tu PC con el overclocking

    Aumenta el rendimiento de tu PC con el overclocking

    La ciberseguridad: Vital Para Las Apuestas Online en España

    La ciberseguridad: Vital Para Las Apuestas Online en España

    Microsoft busca aprovechar el increíble talento de las mujeres para ayudar a llenar la brecha de seguridad cibernética

    Microsoft busca aprovechar el increíble talento de las mujeres para ayudar a llenar la brecha de seguridad cibernética

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Los visionarios detrás de Tor han revolucionado la navegación en línea con su nuevo navegador basado en VPN

    Los visionarios detrás de Tor han revolucionado la navegación en línea con su nuevo navegador basado en VPN

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    China desarrolla una batería de litio con una densidad récord de almacenamiento de energía

    China desarrolla una batería de litio con una densidad récord de almacenamiento de energía

    El negocio de la salud

    El negocio de la salud

    Intel está paulatinamente descontinuando numerosos procesadores de su 11.ª generación

    Intel está paulatinamente descontinuando numerosos procesadores de su 11.ª generación

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo
    ¿Por qué necesitas un entrenador personal?

    ¿Por qué necesitas un entrenador personal?

    Descubre los beneficios y funciones de la suplementación deportiva

    Descubre los beneficios y funciones de la suplementación deportiva

    Razones por las que los ejercicios HIIT son los más efectivos

    Razones por las que los ejercicios HIIT son los más efectivos

    Alimentos que mejorarán tu desempeño en el gimnasio

    Alimentos que mejorarán tu desempeño en el gimnasio

    Cosas a considerar al comprar mesas de maquillaje al por mayor

    Cosas a considerar al comprar mesas de maquillaje al por mayor

    Consejos efectivos para tratar las ojeras

    Consejos efectivos para tratar las ojeras

    Cuidado de la piel saludable para adolescentes

    Cuidado de la piel saludable para adolescentes

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Top 5 por las que estas realmente ansioso por el chocolate

    Top 5 por las que estas realmente ansioso por el chocolate

    Aumento de peso por retención de agua

    Aumento de peso por retención de agua

    Aprende a perder peso de manera eficiente y correcta

    Aprende a perder peso de manera eficiente y correcta

    Maneras de preparar ensaladas con aspecto atractivo

    Maneras de preparar ensaladas con aspecto atractivo

    Cómo llevar un vestido largo todo el año

    Cómo llevar un vestido largo todo el año

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Ideas para tu boda del sueño

    Ideas para tu boda del sueño

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Cómo negociar con los acreedores: consejos prácticos para negociar con los acreedores y reducir sus deudas

    Cómo negociar con los acreedores: consejos prácticos para negociar con los acreedores y reducir sus deudas

    5 Ways to Use Hair Extensions - Custom Hair by Albert Amin

    5 Ways to Use Hair Extensions - Custom Hair by Albert Amin

    Beneficios de las placas solares de autoconsumo

    Beneficios de las placas solares de autoconsumo

    Ideas de regalos espirituales para personas creyentes

    Ideas de regalos espirituales para personas creyentes

    ¡Servicio de limpieza profesional a domicilio!

    ¡Servicio de limpieza profesional a domicilio!

    ¿Qué es el Snus? Una guía para principiantes

    ¿Qué es el Snus? Una guía para principiantes

    Cómo aprovechar el tiempo libre para mejorar tu salud mental y física

    Cómo aprovechar el tiempo libre para mejorar tu salud mental y física

    Cómo aprovechar la tecnología para mejorar tu estilo de vida

    Cómo aprovechar la tecnología para mejorar tu estilo de vida

  • Marketing
    Herramienta de analisis de tus problemas de SEO

    Herramienta de analisis de tus problemas de SEO

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramienta online de generador de datos estructurados

    Herramienta online de generador de datos estructurados

    Reescritor de Articulos - herramienta de paráfrasis

    Reescritor de Articulos - herramienta de paráfrasis

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

  • Juegos
    Juegos - HTML5 Canvas

    Juegos - HTML5 Canvas

    Como jugar online y resolver un sudoku

    Como jugar online y resolver un sudoku

    Cómo jugar Ajedrez Online TL

    Cómo jugar Ajedrez Online TL

    Como se juega al ajedrez

    Como se juega al ajedrez

    Tetris en JavaScript – Open source

    Tetris en JavaScript – Open source

  • Herramientas

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK

o con Email

¿Has olvidado tu contraseña?
Búsqueda extendida

Escriba arriba y presione Enter para buscar.


Tutoriales En Linea » Noticias » Qué es el Shadow DOM

Qué es el Shadow DOM


Tutoriales En Linea Por Tutoriales En Linea En: Noticias, Diseño Web, html5, Html, javascript, XML, WebSite, webmasters, Tutorial 0 Julio 29, 2021

3К
VISTO
Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte Email
Compartir
Facebook Twitter LinkedIn Pinterest Email
Qué es el Shadow DOMEl Document Object Model (Modelo de Objetos del Documento), más conocido por las siglas DOM, es una interfaz de programación de aplicaciones multiplataforma que trata la estructura de documentos HTML, XHTML y XML como un árbol donde cada nodo es un objeto que representa una parte del documento.
Objetos DOM para formularios
Con el paso del tiempo y el avance la web, el DOM ha presentado algunos problemas, entre otros problemas de rendimiento a la hora de desarrollar webs y aplicaciones altamente dinámicas. A lo largo de este artículo repasaremos que es el DOM y como el Shadow DOM, junto al Virtual DOM, intentan resolver estos problemas.

Recordatorio: ¿Qué es el DOM?


De forma muy básica, si tenemos este documento HTML:
<!doctype html>
<html lang="es">
 <head>
   <title>Mi Web</title>
  </head>
 <body>
    <h1>¡Hola mundo!</h1>
    <p>Mi nombre es Jhon</p>
  </body>
</html>
El navegador leerá este lenguaje de texto, lo analizará y lo pasará a un modelo de datos creando un árbol jerárquico con objetos/nodos que representan el HTML original:
Árbol DOM
Con este modelo de datos ya es posible trabajar de forma programática: representar el documento en pantalla, darle estilo o modificarlo de forma dinámica.

La estandarización del DOM es responsabilidad del W3C (World Wide Web Consortium), si bien el desarrollo es realizado por WHATWG de forma constante y el W3C publica versiones estables del estándar WHATWG.

En estos estándares se incluyen las reglas de comportamiento de cada tipo de nodo, las reglas sobre cómo se pueden combinar entre sí y los métodos para acceder a ellos, esto es, los métodos para añadir, eliminar o modificar el DOM.

Además, el DOM permite vincular eventos a cada nodo y vincular funciones a estos eventos, de modo que cuando el evento tenga lugar se ejecuten dichas funciones (event handlers). Por ejemplo, el click o el tap sobre un elemento del DOM es un evento al que se pueden vincular funciones:
<a onclick='dosomething()'>Anchor</a>
El principal lenguaje de programación utilizado para trabajar con el DOM es jаvascript, pero no es el único, ya que el DOM, además de ser una interfaz multiplataforma, es una especificación independiente de lenguajes de programación. Por ejemplo, también se puede trabajar desde PHP con la clase DOMDocument. Incluso afectamos a la representación del DOM con CSS.


¡Tan bueno, tan genial!

Sin embargo, manipular el DOM suele ser una tarea cara en cuanto a recursos y rendimiento, sobre todo en el contexto del frontend, el renderizado de los documentos y su modificación dinámica, algo que está a la orden del día en las aplicaciones web actuales.

Estos problemas se deben principalmente a que HTML, CSS y JS tienen un ámbito global de forma predeterminada. Todo es global. Inyectar o modificar las propiedades de un nodo puede provocar un nuevo análisis de todo el árbol DOM construido previamente, incluyendo un nuevo cálculo completo de su representación visual, lo que se suele referir como «repintado».

Para solucionar este problema y tener elementos encapsulados que no afecten al resto de elementos de una página, una técnica muy popular ha sido el uso de <iframe>, un elemento HTML que permite cargar un documento independiente del documento principal pero dentro de él:
Un iframe permite insertar un documento «encapsulado» dentro de otro
Pero hay una solución mejor: el Shadow DOM, frecuentemente llamado en español como DOM Oculto.

Introducción al Shadow DOM


Se puede pensar en el Shadow DOM como un DOM dentro del DOM. Si el DOM creaba un árbol DOM global, el Shadow DOM crea un sub-árbol dentro del DOM regular. Y dentro del sub-árbol, los nodos HTML, el CSS y el JS son independientes, siendo esta su principal ventaja, ya que permite la encapsulación de pequeñas partes del documento.

Pensemos por ejemplo en CSS. Si queremos dar estilo a un elemento y que no afecte a elementos con la misma etiqueta HTML, tenemos que utilizar clases. A medida que nuestro proyecto crece, las colisiones entre clases y elementos comenzarán a aparecer y nos veremos tentados a utilizar !important.

El mantenimiento a largo plazo se vuelve cada vez más complicado y empezamos a pensar en como deberíamos construir los nombres de las clases, por ejemplo utilizado el método BEM, para crear bloques y elementos más o menos reutilizables y de fácil mantenimiento.

Con Shadow DOM no tenemos estos problemas. No tenemos que pensar en colisión de clases ni en colisión de estilos. Todo queda encapsulado. Incluso se puede encapsular jаvascript dentro del Shadow DOM.

De hecho, la encapsulación del Shadow DOM, junto a otras tecnologías como los Custom Elements, los HTML templates y los HTML imports, son la base de los Web Components, componentes independientes y reutilizables con los que construir páginas webs de una forma mucho más eficiente.

Uso básico de Shadow DOM


Para trabajar con Shadow DOM hay que tener claros estos conceptos:

  • Shadow host: es el nodo del DOM regular al que se ancla el Shadow DOM.
  • Shadow root: es el nodo raíz del Shadow Tree.
  • Shadow boundary: límites entre el DOM Tree y el Document Tree o DOM regular.
  • Shadow tree: es el árbol DOM que hay dentro de nuestro Shadow DOM, el sub-árbol dentro del árbol DOM regular.
El Shadow DOM permite encapsular piezas de un documento HTML
El Shadow DOM siempre hay que anclarlo a un nodo del DOM regular. Este elemento o nodo será el Shadow host. Añadir el Shadow DOM a un elemento del DOM regular es tan fácil como utilizar el método element.attachShadow().

Por ejemplo, si tenemos este elemento que hará de shadow host:
<div class="shadow-host"></div>
Podemos añadir el Shadow DOM de este modo:
const myElement = document.querySelector('.shadow-host');
const shadow = myElement.attachShadow({mode: 'open'});
El nodo raíz del Shadow DOM creado quedará así:
Ejemplo de Shadow root modo open
El modo «open» del Shadow root permite que se pueda acceder al Shadow DOM desde fuera, desde código en el resto del documento, por ejemplo con la propiedad shadowRoot del elemento que hace de Shadow host:
myShadowDom = myElement.shadowRoot;
Si se añade el Shadow root en modo «closed» no se podrá acceder al Shadow DOM desde fuera:
// No se podrá acceder al Shadow root desde fuera
const shadow = myElement.attachShadow({mode: 'closed'});
Ahora que tenemos creado el Shadow root, podemos añadir elementos que quedarán encapsulados en el Shadow Tree. Por ejemplo:
const quoteEl = document.createElement('blockquote');
quoteEl.innerText = 'Haz el amor y no la guerra (John Lennon)';
shadow.appendChild(quoteEl);
Dará como resultado este Shadow Tree:
El blockquote queda dentro del DOM Tree en la sombra
Y ahora podemos introducir CSS o jаvascript dentro del Shadow DOM sin que afecte al DOM regular. Por ejemplo:
const styles = document.createElement("style");
styles.textContent = `
    blockquote {
        color: white;
        background: #000;
        padding: 20px;
        display: block;
        font-family: san-serif;
        font-size: 2rem;
     }
`;
    
shadow.appendChild(styles);
Por ponerlo todo en perspectiva, este sería un código completo de ejemplo:
<blockquote>Esta cita no se ve afectada por los estilos dentro del Shadow DOM.</blockquote>
<div class="shadow-host"></div>
<script>
    const myElement = document.querySelector(".shadow-host");
    const shadow = myElement.attachShadow({mode: 'open'});
    
    const quoteEl = document.createElement('blockquote');
    quoteEl.innerText = 'Haz el amor y no la guerra (John Lennon)';
    shadow.appendChild(quoteEl);
    
    const styles = document.createElement("style");
    styles.textContent = `
        blockquote {
            color: white;
            background: #000;
            padding: 10px;
            display: block;
            font-family: san-serif;
            font-size: 2rem;
        }
    `;
     shadow.appendChild(styles);
 </script>
Que generaría este Shadow DOM:
CSS en la sombra
Y se vería de la siguiente forma (nota como el blockquote del DOM regular no se ve afectado por el CSS declarado dentro del Shadow DOM):
Blockquote con CSS en la sombra

DOM, Shadow DOM y Virtual DOM


Aunque este tutorial quería centrarlo en el Shadow DOM, no podía terminar sin dar unas breves referencias sobre Virtual DOM y las principales diferencias entre ellos.

Como se ha descrito al comienzo del tutorial, el DOM es una representación de un documento HTML completo que se utiliza para determinar los elementos que se van a renderizar y que además permite la manipulación de estos elementos de forma programática.

El Shadow DOM, por el contrario, no representa un documento completo, sino una parte o pieza que siempre estará anclada a un elemento del DOM regular. El Shadow DOM no puede existir sin el DOM regular.

El Virtual DOM, por su parte, es otra herramienta utilizada para mejorar el rendimiento de la manipulación del DOM regular pero que, a diferencia del Shadow DOM, sí representa un documento completo, pero es una representación virtual.

El Virtual DOM es utilizado por algunas bibliotecas, como React o Vue, de modo que modifican el Virtual DOM acumulando cambios y cuando estos están listos los inyectan de una vez en el DOM regular. Dicho de otra forma, realizan múltiples tareas de forma virtual pero una sola tarea (o unas pocas) en el DOM regular.

Referencias


Shadow DOM. W3C Editor’s Draft 06 March 2019
Shadow DOM. W3C Working Group Note 01 March 2018
Eric Bidelman. Shadow DOM v1: Componentes web independientes. Google Web Fundamentals.
Learn the differences between Shadow DOM and Virtual DOM. Vuejs Feed.
Compartir Facebook Twitter Pinterest Tumblr WhatsApp VKontakte
Síguenos en Síguenos en Google News
Articulo anterior Diferencias clave entre var, let ...
Articulo siguiente Como y por qué utilizarlo siempr...
¿Te gusto la informacion?

Si te gustó la publicación, apóyanos compartiendo en tus redes sociales o dejanos tu comentario.

  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
Tutoriales En Linea
Tutoriales En Linea
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: CEO de Tutoriales En Linea:
https://tutorialesenlinea.es
Fundador y CEO de Tutoriales En Linea...Leer mas...

Artículos Relacionados

Es posible extraer Bitcoin en mi PC

Es posible extraer Bitcoin en mi PC

Decoloración en CSS a través del modo de mezcla

Decoloración en CSS a través del modo de mezcla

Cómo obtener la URL actual en PHP

Cómo obtener la URL actual en PHP


Comentarios



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!

Destacados

Herramientas SEO para posicionamiento de nuestra web 2023

Herramientas SEO para posicionamiento de nuestra web 2023

Set 27 660 158
Cómo crear un USB de arranque para instalar Windows 10

Cómo crear un USB de arranque para instalar Windows 10

Oct 12 114 005
Historia de los sistemas operativos

Historia de los sistemas operativos

Mayo 16 20 994
Herramienta online de generador de datos estructurados

Herramienta online de generador de datos estructurados

Feb 11 301 535

Últimas publicaciones

Lista IPTV con canales para Latinoamerica

Lista IPTV con canales para Latinoamerica

Por Dianna 28-05-23
Starting a Woodworking Side Business: A Comprehensive Guide to Turning Your Passion into Profit

Starting a Woodworking Side Business: A Comprehensive Guide to Turning Your Passion into Profit

Por administrador 25-05-23
5 Tips for Designing Training Programs and Materials for Employees

5 Tips for Designing Training Programs and Materials for Employees

Por administrador 25-05-23

Etiquetas

shadowTutoriales En LineaDOMArticulosNoticiasPostElementoHTMLCSSJavascriptHTML5iframesXHTMLXMLAplicaciones





Sobre nosotros

Tutoriales En Linea

¡Bienvenidos a Tutoriales En Línea, el sitio web perfecto para encontrar todas las herramientas necesarias para mejorar tus habilidades de forma gratuita! En Tutoriales En Linea se encuentran tutoriales, cursos online y aprendizaje de calidad, muy útiles para desarrollar tus capacidades... Leer mas...

Tiene una pregunta? Contactar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • DMCA
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Disponible en Google Play - Google Play y el logotipo de Google Play son marcas comerciales de Google LLC.
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • Contactar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.