Tarea 2: Especificaciones de Web Components

PERIODO                                 :               Mayo 2021 – Septiembre 2021

ASIGNATURA                     :        Programación Integrativa de Componente Web          

TEMA                                        :         Tarea 2: Especificaciones de Web Components

NOMBRES                                :           Romero Intriago Génesis Anabel

NIVEL-PARALELO                      :               6to ITIN

DOCENTE                                :           Ing. Luis Castillo. MSc.

FECHA DE ENTREGA               :               05/06/2021

SANTO DOMINGO - ECUADOR

2021

Contenido

1.        Introducción        3

2.        Sistemas de Objetivos        3

2.1.        Objetivo General:        3

Realizar un Informe de Investigación de los conceptos y características de custom elements, shadow DOM, ES modules y HTML templates.        3

2.2.        Objetivos Específicos:        4

4.        Conclusiones        13

5.        Recomendaciones        13

6.        Bibliografía/ Referencias        13

Tabla de ilustraciones

Ilustración 1. Convención de nombres        5

Ilustración 2. Ejemplo de un custom element.        5

Ilustración 3. Estilo a un Custom element.        5

1. Introducción

En el presente informe investigativo se describen los conceptos y características de custom elements, shadow DOM, ES modules y HTML templates.

Los Componentes Web son un paquete de diferentes tecnologías que te permiten crear elementos personalizados reutilizables con su funcionalidad encapsulada apartada del resto del código y utilizarlos en las aplicaciones web.  

Como estudiantes de Programación Integrativa de Componente Web, sabemos que reutilizar código tanto como sea posible es una buena idea. Esto tradicionalmente no es sencillo para estructuras de marcado personalizadas piense en el complejo HTML (y sus estilos y scripts asociados) que en ocasiones se han tenido que escribir para renderizar controles de interfaz (UI) personalizados, y ahora usarlos múltiples veces puede crear un caos en la página si no se es cuidadoso.

Los Componentes Web apuntan a resolver dichos problemas consiste en tres tecnologías principalmente, las que se pueden usar juntas para crear elementos personalizables versátiles que encapsulan la funcionalidad y pueda ser reutilizada donde sea sin miedo a colisiones de código.

En la sección de sistemas de objetivos se encuentra el objetivo general y los objetivos específicos del trabajo. En la sección de desarrollo se realiza la investigación de información de los conceptos y características de custom elements, shadow DOM, ES modules y HTML templates. En la sección de conclusión se expresa un resumen de lo expuesto durante el trabajo realizado y por último, la sección de recomendaciones se propone soluciones frente a la utilización de Web Components y HTML elements.

1. Sistemas de Objetivos

1. Objetivo General:

Realizar un Informe de Investigación de los conceptos y características de custom elements, shadow DOM, ES modules y HTML templates.

1. Objetivos Específicos:

1. Conocer el concepto y caracteristicas de custom elements.
2. Conocer el concepto y caracteristicas de shadow DOM.
3. Conocer el concepto y caracteristicas de ES modules.
4. Conocer el concepto y caracteristicas de HTML templates.

1. Desarrollo

Concepto y caracteristicas de custom elements

Custom elements (elementos personalizados): Un conjunto de APIs de JavaScript que permiten definir elementos personalizados y su comportamiento, que entonces puede ser utilizado como se deseé en la interfaz del usuario.

Convención de nombres

El estándar de HTML5 define que las etiquetas HTML oficiales deben estar formadas por una sola palabra, mientras que los custom elements (nuestras propias etiquetas) deben estar formadas de al menos 2 palabras, separadas por un - guión.

De esta forma, protegemos nuestras páginas o aplicaciones web para que, si en el futuro se añade una nueva etiqueta HTML estándar, no tenga el mismo nombre que las nuestras.

[pic 1]

Ilustración 1. Convención de nombres

Así pues, un custom element básico y sencillo, podría definirse de la siguiente forma:

[pic 2]

Ilustración 2. Ejemplo de un custom element.

También podemos darle estilo CSS al custom element, teniendo siempre en cuenta de que por defecto se trata de un elemento en línea, por lo que tenemos añadir un display diferente y darle unas dimensiones para observar cambios:

[pic 3]

Ilustración 3. Estilo a un Custom element.

• En el caso de <app-element> se trata efectivamente de un custom element, ya que está basado en HTMLElement, el tipo de dato base de cualquier etiqueta HTML.
• En el caso de <element> nos dice que el tipo de dato es HTMLUnknownElement, ya que al no tener guión considera que es un elemento HTML oficial, pero el navegador desconoce de que elemento se trata (es desconocido).

Concepto y caracteristicas de shadow DOM

Shadow DOM: Un conjunto de APIs de JavaScript para fijar un árbol DOM "sombra" encapsulado a un elemento — que es renderizado por separado del documento DOM principal — y controlando funcionalidad asociada. De esta forma, se pueden mantener características de un elemento en privado, así puede tener el estilo y los scripts sin miedo de colisiones con otras partes del documento.

Shadow DOM refiere a la habilidad de un navegador de incluir un subárbol de elementos en un documento, pero no así en el árbol DOM de este documento.

...