¡Genial!, no he ahondado mucho en el tema de los Web Components, pero hasta donde tengo conocimiento, su filosofía es similar a la de Vue o React Components, pero con la ventaja de que estos son nativos de JavaScript, prácticamente podemos crear nuestros propios componentes dentro de un proyecto HTML 😄.
Les dejo un enlace documentando más acerca de esto (en español):
Los problemas estan relacionados a los distintos ecosistemas o frameworks (React, Angular, Vue), puesto que que estos no pueden coexistir entre sí, por lo que los Web Components al estar fundamentados en JavaScript puro, brinda más compatabilidad.
- El desarrollo web se hace más complicado
- Actualmente se tiene un ecosistema gigante de JavaScript
- Varias tecnologías no pueden co existir en un mismo proyecto a la vez, como ser angular con react
- Entonces debemos elegir bien un stack de tecnologías
- Actualmente se tiene un ecosistema gigante de JavaScript
- Para solucionar este problema existen Web Components:
- Usan estándares web, para conseguir el mismo resultado e incluso mejor
- No necesitamos cargar ninguna librería para obtener una arquitectura más escalable
El desarrollo web actualmente se está volviendo complicado debido a que existen muchas tecnologías que si bien facilitan el desarrollo no están dejando usar otras para un mismo proyecto, es ahi donde entran los webs components para obtener el mismo resultado con web api’s
-
REUTILIZACIÓN: Don’t Repeat Yourself (you only have to build it once)
-
LEGIBILIDAD: Hace más fácil a los demás entender el código. Mejor semántica.
-
MANTENIBILIDAD: Cada uno de los componentes puede ser escrito y probado de forma individual, sin comprometer la aplicación completa.
-
INTEROPERABILIDAD: Los frameworks y librerías no están hechos para coexistir entre ellos. Los Web Components sí.
-
CONSISTENCIA: Gracias a la naturaleza reutilizable e interoperable de los Web Components ya no tendrás que crear los mismos componentes en diferentes frameworks o librerías.
-
Elementos personalizados autónomos — estos no heredan de elementos estándar HTML. Se usan estos elementos en una página escribiéndolos literalmente como un elemento HTML nuevo. Por ejemplo , o document.createElement("popup-info").
-
Elementos preconstruidos personalizados heredan de elementos HTML básicos. Para crear un elemento de este tipo, tienes que especificar qué elemento extiende (como se verá en los ejemplos de abajo), y se usan escribiendo el nombre del elemento básico, pero añadiendo un atributo (o propiedad) is y dándole como valor el nombre del elemento personalizado que se ha desarrollado. Por ejemplo
<p is="word-count">, odocument.createElement("p", { is: "word-count" }).
Solo para refrescar:
-
document.createElement: Crea una nueva etiqueta en memoria
-
element.setAttribute: Establece un atributo a alguna etiqueta
-
element.getAttribute: Obtiene el atributo de una etiqueta
-
element.textContent: Establece el contenido en texto de una etiqueta
-
element.innerHTML: Establece el contenido HTML de una etiqueta
-
element.appendChild: Inserta esa etiqueta que estaba en memoria al DOM real
También recordemos que no es buna práctica usar innerHTML 👀
Basicamente la API Template nos permite conectar un web component de forma más profesional y organizada. También nos ayuda a clonar los elementos facilmente (Ya que como lo hicimos en la clase anterior el elemento no se clonaba, sino que se pasaba de etiqueta en etiqueta hasta la ultima en ser renderizada) La etiqueta <template>
Es una etiqueta que nos sirve como contenedor de código. Todo lo que escribamos adentro de esta etiqueta no se va a renderizar , sino que hay que activarlo mediante Javascript. El profesor sin embargo no muestra cual es dicho proceso y procede a utilizar una forma distinta. En el siguiente enlace vas a ver cómo se activa desde JS:
Escribir y activar el código dentro de la clase De esta forma estamos armando toda la estructura HTML dentro de Javascript, pero insertandola en la clase y fraccionando el HTML y CSS para más placer.
En este caso, creamos la clase, con su extension y constructor, luego creamos un método que contendrá la estructura HTML (getElement) . Adentro insertamos la variable template que contiene la estructura.
getTemplate() {
const template = document.createElement('template');
template.innerHTML = `
...(codigo HTML)
`}En otro metodo (getStyles) todo lo que hacemos es retornar un literal string que contiene el código CSS (si queremos podemos contenerla en una variable, eso es a comodidad del programador).
getStyles() {
return `...(código CSS)`
}y luego al final del código de getElement la llamamos de esta forma
${this.getStyles()} Clonar Elementos
Para clonar el código debemos indicar mediante el método cloneNode que se puede clonar. Para eso invocamos el contenido de getTemplate, y lo anidamos a la clase (que luego al ser invocada en el HTML se convierte en la etiqueta misma)
render() { this.appendChild(this.getTemplate().content.cloneNode(true)) }Y FINALMENTE…
Invocamos el render
connectedCallback() { this.render(); }Shadow DOM permite adjuntar arboles DOM ocultos a elementos en el arbol DOM regular — este arbol shadow DOM comienza con un elemento shadow root, debajo del cual se puede adjuntar cualquier elemento que desee, de la misma manera que el DOM normal.
Hay algunos conceptos de Shadow DOM que deben ser tomados en cuenta:
Shadow host: El nodo regular del DOM al que es atado el shadow DOM.
Shadow tree: El arbol DOM dentro del shadow DOM.
Shadow boundary: El punto en el que el shadow DOM termina y el DOM regular comienza.
Shadow root: El nodo raiz del arbol Shadow.
Cabe destacar que el shadow DOM no es algo nuevo — los exploradores lo han usado por un largo tiempo para encapsular la estructura interna de un elemento. Piensa por ejemplo en un elemento <video>, con los controles predeterminados del explorador a la vista. Todo lo que ves en el DOM es el elemento <video>, pero este contiene una serie de botones y otros controles dentro de su shadow DOM. Las especificaciones del shadow DOM fueron hechas para que seas capaz de manipular el shadow DOM de tus elementos personalizados.
constructor: Directamente desde el JavaScript Engine, el constructor nos servirá para definir y cargar todas las variables en memoria que necesitemos, es mala práctica pintar el componente aquí.
connectedCallback: Cuando el componente ya está pintado dentro del DOM ypodemos hacer uso de él.
attributeChangedCallback: Cuando un atributo de nuestro componente cambia.
disconnectedCallback: Cuando el componente se “destruye” o se quita del DOM.
adoptedCallback: Cuando el componente es movido a un nuevo DOM, básicamente cuando es pintado desde un iframe por ejemplo 😄.
Más información sobre este lifecycle aquí (en español):
folder1/
└── folder2/
├── folder3/
│ ├── file1
│ └── file2
└── folder4/
├── file3
└── file4
const prueba = '';