Cómo utilizar HTML y con Shadow DOM
Ranura de HTML Es uno de los estándares más notables hechos por W3C. Combina eso con otro impresionante estándar W3C llamado plantillas, y tienes un fabuloso brebaje para trabajar. Siendo capaz de crear y agregar elementos HTML a una pagina usando JavaScript es una tarea necesaria e importante.
Es útil cuando un fragmento de código tiene que aparecer solo en ciertos momentos, o cuando no desea escribir cientos de elementos HTML estructurados de manera similar pero desea automatizar el proceso.
Crear elementos HTML en JavaScript es no tan deseable. Es una molestia tener que verificar y volver a verificar si ha cubierto todas las etiquetas, las ha colocado en el orden correcto, en general, solo hay también mucho para escribir y realizar un seguimiento de. Esta confusión, sin embargo, tengo una solución cuando el la etiqueta apareció. Si algo necesita ser agregado dinámicamente a la página, puedes ponerlo dentro de la elemento.
En este post, te mostraré cómo puedes usar el etiquetas junto con JavaScript para crear una mini fábrica de tablas HTML que puede crear y poblar cientos de tablas similares.
los
los etiqueta contiene código HTML que no será renderizado por los navegadores hasta que sea correctamente agregado al documento, usando JavaScript. los elemento.
UNA Shadow DOM es similar a un DOM regular (el modelo de documento analizado desde HTML). Eso crea un arbol de ámbito (un árbol DOM de sombra), que tiene una raíz propia y también puede tener un estilo propio.
Cuando inserte el árbol DOM de Shadow en un elemento en el documento principal, el elemento se llamará el anfitrión de la sombra -, Todos los elementos secundarios del host de sombra que están marcados con el espacio atributo (no es lo mismo que el mencionado
The Shadow DOM, a partir de la redacción de este artículo (julio de 2017), son Solo se admite en navegadores basados en WebKit y Blink pero puede verificar el estado real de la compatibilidad del navegador en CanIUse en cualquier momento.
Configurando el HTML
¿Todavía confuso? Veamos un código, comenzando con el elemento.
Dentro Dentro de la plantilla, También he añadido algunos estilos basicos para la mesa, usando el , hay una bien utilizar como modelo para creando algunas tablas Eso será agregado a un documento. Existen
y ) actuando como marcadores de posición Para los títulos de columna y valores de celda. Cada ranura tiene una única nombre atribuir eso lo identifica.