Sombra DOM: Un subárbol DOM para bloques de código encapsulados

proyectos

Web han crecido cada vez más complejo en los últimos años. Hoy en día, muchas páginas web están escritas en una, mezcla idiosincrásica complicado de HTML , CSS, JavaScript y . También incluyen más contenido incrustado (widgets, imágenes, vídeos, etc.) de fuentes externas como las redes sociales, plataformas de streaming de contenido, o redes de distribución de . Si no desea utilizar iFrame integrar esta terceros contenido , DOM sombra es una excelente alternativa.

En este artículo, vamos a explicar lo que este subnivel del Document Object Model (DOM) es , describen otros escenarios que se puede utilizar para, y le mostrará cómo implementarlo en su propio sitio web.

¿Qué es DOM sombra?

Sombra DOM es un subnivel de la norma de objeto de documento Model (DOM) y uno de los cuatro elementos principales del conjunto de componentes web estandarizada por el consorcio W3C en 2012. Como una de DOM regular, una sombra DOM se genera de forma automática a partir del código HTML por la mayoría de los navegadores populares. Sin embargo, este tipo de DOM no se aplica a la totalidad del proyecto web, sólo para el componente (s) del proyecto expresado en su interior. Además, Amos sombra separan los elementos que contienen desde cualquier estilo predeterminado e instrucciones de estructuración que se aplican a los proyectos, tales como ciertas declaraciones CSS. En términos simples, Amos sombra son autónomo, encapsulado bloques de código dentro de un DOM regular que tiene su propio ámbito .

“modelo” no es el término más preciso para DOM DOM o sombra. Estrictamente hablando, los dos son interconecta para acceso a datos. El modelo de objeto que subyace sólo es relevante para la validez de estas interfaces de .

cómo se estructuran los DU sombra?

Sombra DOM permite utilizar cualquier número de árboles de sombra además de la estructura del documento regular, que resume la estructura DOM de todo el proyecto. Cada uno de estos árboles tiene un nodo raíz denominado raíz sombra y contiene sus propios elementos y el estilo. Los árboles siempre están asignados a un elemento específico del árbol de documento padre o de otro árbol de sombra. En ambos casos, este nodo se denomina sombra anfitrión . La frontera entre el DOM regular y el DOM sombra se llama la sombra límite .

cómo es exactamente lo que usted utiliza o implementar DOM sombra?

No es necesario instalar o integrar cualquier software adicional para utilizar la interfaz de sombra DOM en un proyecto web. Técnicamente hablando, lo único que haces es la creación de un sub-árbol en el código fuente . Esto significa que puede poner en práctica un nuevo DOM sombra en cualquier momento a través del documento HTML de su aplicación web. El DOM sombra se hace más tarde, junto con el DOM matriz completa, por lo que no se necesitan más pasos.

El siguiente ejemplo ilustra lo fácil que es integrar oculta, encapsulado DOM nodos secundarios usando JavaScript simple. En este ejemplo, se añade un DOM sombra al documento HTML con un elemento

, incluidas las instrucciones de estilo únicos :

EL_0

El guión de la aplicación de la DOM sombra consta de tres componentes: en primer lugar, se genera el subdocumento oculta , a continuación, un elemento de texto simple se añade a la misma, y ​​finalmente, el de color de este texto se modifica usando el tercer componente (en este caso: “rojo”).

Para que un DOM sombra que se accede desde el exterior a través de JavaScript, también hay que establecer el estado del método element.shadowRoot a “abierto”. Si se establece el estado a “cerrado” en su lugar, el acceso al DOM oculta denegado.

¿Cuáles son ideales para aplicaciones DOM sombra?

Sombra DOM son una excelente manera de mantener ciertos elementos de su proyecto web separado del resto del sitio sin tener que usar tecnologías especiales como iFrames. Además, los navegadores más populares ahora son totalmente compatibles con el DOMS sombra, así como todas las demás tecnologías de la moderna suite de componentes web. Por lo tanto, si se desea diseñar un determinado componente o un área determinada de su sitio web independientemente de las instrucciones de estilo a nivel de documento y estructuras , Amos ocultos son una excelente, fácil de implementar opción, especialmente para proyectos complejos.

Sin embargo, no todos los elementos HTML se puede convertir en una gran cantidad de sombra. Por ejemplo, si se utiliza esta tecnología en un archivo de imagen, se producirá un error y obtendrá un mensaje de error. DOM sombra se limitan a los siguientes componentes HTML: artículo

  • lado
  • blockquote
  • cuerpo
  • div
  • pie de página
  • h1, h2, h3, h4, h5, h6
  • cabecera
  • principal
  • NAV
  • p sección
  • lapso

con el fin de proteger su privacidad, el video no se carga hasta que haga clic en él. desarrollo

  • 06/04/20
  • Web
  • ¿Qué te pareció el artículo? 51
  • HTML

Deja un comentario