Hablemos de los Componentes Web

Muy bien. Así que empecemos. ¿Qué son los componentes web? Me gustaría empezar diciendo por qué quería dar esta charla. Me gusta construir cosas con HTML y CSS. No soy un gran fanático de JavaScript. Cuando estaba aprendiendo React por primera vez, no entendía por qué las cosas eran como eran. No entendía por qué tenía que usar set states para cambiar una propiedad de estado, pero luego no podía simplemente cambiarla como una variable. No tenía sentido para mí. Personalmente, prefiero usar HTML.

Lo que no me gusta de HTML es que si quiero crear seis bloques de lo mismo, tengo que copiar y pegar lo mismo muchas veces. Y eso es lo que me gusta de React. Y pensé, ¿hay alguna manera de tener la simplicidad de HTML con la reutilización de React? Y la respuesta fue los componentes web. Básicamente, los componentes web son un conjunto de tecnologías que te permiten crear elementos HTML reutilizables. Así que de entrada, ya están ahí en tu navegador. No necesitas hacer ninguna instalación. Es como usar HTML vanilla. ¿Así se llama? Es como usar HTML regular, pero con toda la diversión de React.

Y ¿cómo funciona? Primero, tenemos nuestros elementos personalizados. Los elementos personalizados son una API que te permite definir nuevos elementos y su comportamiento. Así que puedes crear tus propias etiquetas HTML para usar. Y luego tenemos el shadow DOM, que suena muy genial y me gusta. Lo cual te permite encapsular elementos, funcionalidad y estilos.

Esto es lo que te permite eliminar tus elementos personalizados del flujo regular de la página y tenerlos en un DOM diferente, lo cual es divertido. Y finalmente tenemos las plantillas HTML, que son las etiquetas personalizadas que realmente estás renderizando en las páginas. Sí.

Así que iba a mostrar un poco de código para mostrar de qué estoy hablando. Esta es una plantilla de blog simple que creamos en HTML regular. Si estás usando HTML regular para esto, es solo copiar y pegar y cambiar el contenido. Así que veamos un poco de código, que es en lo que soy bueno. Muy bien.

Primero vamos a ver cómo se ve en HTML regular. Haz clic. Así que tenemos esto... Tenemos nuestro código aquí arriba. Y el HTML regular es simplemente pegar el div con el mismo contenido en todas partes. Voy a hacer zoom. Ahí vamos. Así que puedes ver que solo tienes el div de la publicación y se repite varias veces en toda la página. Porque eso es lo que hace HTML. No te da variedad en cómo decides codificar. Y luego tenemos el método que suelo usar cuando intento repetir cosas. En mi página de portafolio, si intento repetir los sitios web que he creado, porque uso HTML básico para construir mi página de portafolio, en lugar de tener que escribirlos todos al mismo tiempo y luego simplemente cambiar el contenido, suelo crear una matriz con todo el contenido que necesito y luego lo renderizo en la página usando JavaScript vanilla. Así que si vamos a hacer eso para esto... Es una barra de desplazamiento difícil. Si vamos a hacer eso para esto, se vería algo así. Así que iba a hacer codificación en vivo, pero luego me di cuenta de que eso es simplemente... No tengo el coraje suficiente para escribir código en vivo. A veces las cosas salen mal y me derrumbo, y no voy a hacer eso. Así que si estuvieras haciendo esto con JavaScript vanilla, sería algo como...

Defines tu publicación. Así que básicamente todo el HTML que se repitió anteriormente, lo tenemos dentro de una función. Y luego lo renderizas en la página. En este caso, lo hice con un botón al que puedes hacer clic para agregar nuevas publicaciones y luego puedes agregar tantas como desees. Pero cuando lo renderizas en una página, básicamente estás definiendo el documento, creando elementos y luego agregando ese elemento al contenedor en el que queremos que esté nuestro código. Así es básicamente cómo funciona esto con JavaScript vanilla.

Esta es la idea básica detrás de los Componentes Web. Se trata de tomar tu HTML y agregarlo a tu DOM. Pero la idea detrás de los Componentes Web es poder tener funcionalidad y estilos encapsulados y reutilizables. Es como una mezcla. Veremos cómo podemos complicarlo un poco más. Volviendo.

Hablemos de los elementos personalizados. Los elementos personalizados son la primera parte de los Componentes Web. Como hemos dicho, son elementos que te permiten definir tus propias etiquetas HTML. Así es como se vería la definición de elementos personalizados en JavaScript. Defines tus componentes personalizados como una clase y luego utilizas la API de elementos personalizados para definir esta nueva clase que has creado. Luego puedes llamarla en tu HTML utilizando tu etiqueta personalizada. Es bastante sencillo. Los elementos personalizados te permiten definir etiquetas HTML personalizadas. La única sintaxis es que deben tener un guión en ellas. Entonces tienes 'customElements.define', y el que tiene el guión es el HTML que se renderizará en la página. Luego renderizas tu etiqueta HTML personalizada en el DOM. También tiene un método de ciclo de vida. Veamos cómo se vería un elemento personalizado si lo colocáramos en el DOM. Volviendo... En esta parte escribiré un poco de código. Muy bien, como dijimos, cuando quieres crear tu componente personalizado, primero debes definir tu clase. Simplemente crearé una clase y la llamaré 'PostComponent'. Y utilizas la palabra clave 'extend'. Es prácticamente la misma forma en React.

Utilizarías la palabra clave 'extend' del componente React. En este caso, extendemos la palabra clave del elemento HTML. Totalmente olvidando cuál es la sintaxis. Sí, eso estaba correcto. ¿Hay un punto? ¿No hay un punto? Palabra clave del elemento HTML y eso es prácticamente todo. Porque es un componente de clase, debemos inicializar nuestro constructor. Y simplemente hacemos tu constructor y llamamos a tu super cosa. Y eso es todo.

Y luego, al trabajar con... Siento que esto es muy común para las personas que usan mucho React. Me gusta decir que estoy muy contento de que los componentes funcionales sean una cosa. No era fan de los componentes de clase. Así que una vez que hayas inicializado tu constructor, luego con elementos personalizados, tienes tus propios métodos del ciclo de vida. De la misma manera que tienes... UseEffects en React. Y los componentes personalizados se llaman... Se llama algo callback. Oh. Bueno, de todos modos. No puedo recordarlo. No me voy a estresar. Lo voy a poner aquí.

Entonces, básicamente, lo que queremos hacer es que nuestra clase devuelva el... El contenido que teníamos en nuestra página anteriormente que hizo la publicación. Entonces, simplemente puedes crear... Vamos a establecer esto en el inner HTML. Por lo tanto, esto va a apuntar... Una vez que inicialicemos el componente de publicación en la página, va a apuntar a ese componente de publicación. Y establecer el inner HTML en lo que definamos dentro de esta plantilla literal. Así que, pongamos un título.

Sí. Dale a esto un título de clase. Solo voy a llamarlo título de publicación. Y h2. Le vamos a dar algo de contenido. Contenido. Necesito poner algo de lorem ipsum ahí. Porque si no pones lorem ipsum, ¿cómo estás codificando? Y luego le vamos a dar un span. Span de fecha.

Y finalmente, vamos a definir nuestro elemento personalizado aquí. Entonces va a ser custom element dot define. Pasamos el nombre de nuestro componente personalizado, que es componente de publicación. Y luego pasamos la clase de componente que acabamos de crear allí arriba. Muy bien. Y finalmente, cuando queremos llamar a ese componente, simplemente pasamos la cosa real. Muy bien, tengo que cerrar esto. Oh, tengo un error. Eso es divertido. Veamos. Por supuesto que no. Eso sería demasiado fácil. Muy bien. No, necesito definir esto. No, no lo hago. Pausa. Dato curioso, son elementos, no elemento. Ahí vamos. Funcionó. Muy bien, codificar en público nunca es divertido. Pero está bien.

Básicamente, lo que tenemos aquí es que hemos logrado renderizar el título de la publicación, el contenido y las fechas como queremos que aparezcan en la página. Ahora veamos cómo trabajamos con elementos personalizados.

Veamos qué sucede cuando introducimos el Shadow DOM. Así es como se veía antes. Y luego el Shadow DOM. Soy un gran fan del Shadow DOM solo porque suena como un método de jitsu realmente genial. Había el DOM y luego está el Shadow DOM. Pero básicamente, el Shadow DOM es una forma separada del DOM. Es algo que te permite agregar documentos a tus elementos a tu árbol de documentos sin afectar al DOM real. ¿Sabes cómo en Naruto, el clon de sombra es solo una extensión de ellos mismos? Perdón si me estoy volviendo muy nerd, pero así es como tiene sentido en mi cabeza. La sombra es una extensión de ti mismo, pero lo que le sucede a la sombra no te sucede a ti. Es algo similar con el DOM. Cuando extiendes el Shadow DOM, lo que sucede en el Shadow DOM no afecta al DOM real. Y así es como funciona el Shadow DOM.

Así que con los componentes web, cuando queremos llamar al Shadow DOM, ya tenemos nuestro componente personalizado que hemos definido, y luego dentro de eso, llamamos a this.attachshadow y establecemos el modo en abierto. Establecer el modo en abierto es lo que nos permite ver el elemento en el que estamos colocando el Shadow DOM. Una vez que hayas llamado a tu attachshadow DOM, eso es lo que crea una nueva instancia de la raíz de sombra. La raíz de sombra es a lo que apuntamos. Así que en HTML normal, tienes tu etiqueta raíz real. Esa es tu etiqueta HTML normal. Entonces, si estás aplicando estilos a las raíces en CSS, eso significa que estás aplicando estilos a la etiqueta HTML. Con el Shadow DOM, la raíz de sombra es la base del Shadow DOM. He dicho Shadow DOM tantas veces que ya no suena como una palabra real. Continuemos.

Entonces, cómo funciona, básicamente, es como un iframe. Entonces, cada nueva instancia del Shadow DOM es independiente. Tal vez no debería haber dicho esa palabra. Cada nueva instancia del Shadow DOM es independiente de la página real, como si tuvieras un iframe. Un ejemplo de elementos comunes del Shadow DOM serían los elementos video en HTML. La etiqueta video muestra un video real en la página, pero no se ve afectada por los demás elementos en la página.

Entonces, si pensaste en por qué necesitas comenzar específicamente ... Si bien los videos no se ven afectados por el estilo global, es porque se instancian en su propio elemento del Shadow DOM. Y podemos ver los elementos del Shadow DOM en nuestra página, tal vez YouTube? Básicamente, puedes ver el DOM regular que normalmente no te mostraría qué elementos de sombra hay, pero puedes activarlo. Intentando desplazarme. De todos modos, confía en mí. Puedes activar las raíces de sombra en algún lugar de este panel. Hay un teclado, hay un pequeño botón de verificación como este que te permite mostrar qué elementos de sombra hay. Y para las etiquetas video así es como funcionan. No son parte del DOM en sí. Están en su propia pequeña cosa de iframe. Y por eso no se ven afectados, oh, estoy cerrando YouTube antes de que se ponga raro. Por eso no se ven afectados por el estilo global de los elementos. Y los Shadow DOM permiten establecer estilo y marcado sin afectar el DOM global, así que es lo mismo con los videos. Los videos tienen su propio estilo, pero el estilo encapsulado en el video no afecta a ningún otro estilo en la página. Simplemente está atrapado en esa pequeña etiqueta video. Y te permite interactuar con las raíces de sombra, lo cual suena muy bien, por eso lo puse ahí. Así que veamos cómo funciona el Shadow DOM. Este es un enlace. Aquí tenemos nuestros elementos personalizados. Entonces, esto sería, podemos ver que tenemos un componente de publicación aquí y así es como se vería un componente de publicación normal. Pero luego lo que queremos hacer ahora es crear una nueva instancia del Shadow DOM. Así que desplacémonos un poco. Muy bien.

Y luego vamos a crear nuestra nueva clase de sombra. Voy a dejar el código comentado allí porque tengo miedo de que no funcione de nuevo, así que tendré algo de referencia. Entonces creamos nuestros elementos de sombra, inicializamos nuestros constructores. Inicializamos nuestro constructor. Y aquí es donde llamamos a this.attachShadow y modo abierto. Entonces, el modo, el modo de sombra abierto, es lo que te permite interactuar con el Shadow DOM. Si estuviera cerrado, no podrías agregar elementos al Shadow DOM. Eso es lo que la gente suele usar para incrustaciones.

Entonces, si has intentado incrustar un iframe y has intentado darle estilo o algo y no has podido, generalmente es porque el Shadow DOM está cerrado. Al cerrar la ruta, significa que no puedes interactuar con ese elemento en absoluto. Así es como funciona esto. Y luego podemos tener this.shadowRoot. Entonces necesitamos crear un elemento. Vamos a crear una constante. Digamos que shadowDiv es igual a document.createElement div. Y podemos pasarle HTML aleatorio a esto. shadowDiv.innerHTML = hola react advanced. Sí, y luego this.shadowRoot.appendChild, y pasemos shadowDiv. Entonces este es el constructor de clase para nuestros componentes de sombra. Todavía necesitamos definirlo usando customElements para que podamos... ¿Estás contento ahora? Ahí lo tienes. Entonces podemos definirlo usando customElements.define. Y esto va a ser shadow-comp, y vamos a tener la clase del componente de sombra. Siempre olvido qué casos uso, pero este es este. Muy bien. Y luego veamos si esto funciona. Componente de sombra. De acuerdo. Gracias. Eso es lo que obtengo por cambiar las cosas sobre la marcha.

Muy bien. Ahí lo tenemos. Pero luego, lo importante de esto es cuando vamos a nuestro DOM real, puedes ver que en el componente de publicación, solo era parte de la página. Así que no estaba realmente separado del DOM. En el componente de sombra, se abre una nueva raíz de sombra. Y puedes ver que aquí dice abrir, y tenemos nuestro div pasado aquí. Así que aquí tienes un ejemplo de cómo inicializar un componente de sombra.

Pero ahora tenemos que mostrar cómo los estilos de los componentes de sombra estarían encapsulados del resto de la página. Así que esto es nuestro, voy a estilizar esto de la misma manera en que está escrito este. Muy bien, solo voy a copiar y pegar esto. Muy bien. Esto funcionará. Entonces, algo más que podemos hacer con componentes personalizados es que también puedes pasar atributos a componentes personalizados para que se representen como data. De la misma manera en que en React, inicializarías, digamos que este era un componente de publicación en React y simplemente establecemos el valor en el valor que queremos que se represente. Podemos hacer lo mismo en componentes personalizados usando JavaScript.

Entonces aquí arriba, tenemos nuestro callback conectado. Así es como se llama. ¿Conector? No suena bien. Entonces aquí básicamente vamos a obtener los atributos. Y eso es lo que establecemos para el componente que queremos que se represente. Y cuando llamamos a este componente, simplemente pasamos los atributos aquí. Así que aquí estamos pasando atributos de componentes personalizados y data, título y texto, hola, React, Advance London. Y eso es lo que se representa en la pantalla aquí. Así que podemos hacer lo mismo para nuestros componentes de sombra. Una vez que llames a tu super. Y this.attachShadow. Así que podemos dejar todo esto en nuestros constructores y poner todo esto en nuestro callback conectado. El callback conectado es prácticamente el useEffect de los componentes web. Una vez que tu página se haya cargado por completo, una vez que el elemento se represente en la página, se llamará al callback conectado. Así que tenemos un shadow dev.

Muy bien, ahora tenemos nuestro shadow.innerHTML. Y necesitamos definir todo esto. Así que vamos a tener const title igual a this.getAttribute('title'). Y si no existe, lo hacemos nulo. Lo mismo con const dataText. Esto va a ser this.getAttribute('data-text'). Si no existe, lo hacemos nulo. Y luego vamos a establecer date como una nueva instancia de la fecha en la que se renderiza el componente. Date. Llamaré a string. Gracias. Ahí vamos.

Muy bien, esto es lo que tenemos en la pantalla ahora. Y una vez que inicialicemos los valores aquí, title será igual al elemento de sombra y dataText será igual a hola react advanced. Muy bien. Así que tenemos esto configurado ahora, y luego voy a cambiar el dataText para tener algo divertido. dataText.split('').reverse().join(''). Así que nuestro texto de sombra será un espejo de nuestra publicación aquí definida. Ahí vamos. Así que nuestro texto de sombra se convierte en un espejo de nuestra publicación, pero ahora si miramos aquí, podemos ver que aunque hemos definido esto dentro de una clase de publicación. Osh. Así que esto está en una clase de publicación, por lo que técnicamente debería tener todos los estilos de los elementos de la publicación que tiene este aquí arriba. Porque podemos ver que hemos estilizado nuestros elementos de publicación. Una vez que hago scroll hacia arriba, comenzamos con el elemento aquí, pero el shadow DOM no recibe ninguno de esos estilos porque el elemento de publicación se estilizó en el DOM global. Y eso no se transmite al shadow DOM. Así que cuando creas elementos de sombra, si quieres estilizarlos, también tienes que definir los estilos para los elementos de sombra. en tus componentes personalizados, lo cual es un poco molesto, pero está bien. Así que eso es lo que vamos a hacer ahora. Podemos establecer un atributo shadowDiv.

Aquí, también podemos pasar esto a este elemento. Podemos crear una etiqueta de estilo aquí. Y esta etiqueta de estilo puede tener, veamos, punto post y orden, NPX, sólido, derecha. Ahí vamos. Entonces, una vez que hayas definido tu etiqueta de estilo dentro del shadow elemento, solo afecta al elemento de sombra. Y puedes ver que no afectó el estilo del post que estaba en nuestro tag global tampoco. Así es como funciona la encapsulación. Ambos son elementos que se renderizan en el DOM y el usuario puede ver ambos. Pero uno se mantiene separado del otro porque es el shadow DOM y el otro es el elemento personalizado. Así es como funciona la parte de sombra.

Y luego podemos pasar a las plantillas HTML. Entonces, las plantillas HTML son una etiqueta específica que no se muestra en la página HTML. Y explicaré qué significa eso. Básicamente, si tenemos esta plantilla aquí, esto no se va a mostrar en una página real. Así que echemos un vistazo rápido a esto. Voy a cortar esto. Aquí hemos definido nuestras plantillas. Entonces, en todos los sentidos, no tenemos ningún JavaScript en esta página. Pero por defecto, la etiqueta de plantilla no se renderiza en la página. Si abres tu DOM, verás la etiqueta de plantilla en el DOM, pero está prácticamente vacía. Aquí tenemos la etiqueta de plantilla y tenemos todos los elementos que deberían estar dentro de ella, pero por defecto la etiqueta de plantilla no se muestra en el DOM. Simplemente se establece en display none y está vacía. Todos los elementos se almacenan dentro de algo llamado un fragmento de documento. El fragmento es básicamente una parte del modelo de objeto del documento que se almacena en la etiqueta de plantilla. Las etiquetas de plantilla son básicamente marcadores de posición para el contenido que deseas renderizar en la página en un momento posterior. Entonces, cualquier cosa que pongas en una etiqueta de plantilla se puede llamar después de que la página se haya cargado utilizando JavaScript en tus componentes personalizados.

Voy a ser honesto. No entendí esto. ¿Verdad? Como, ¿cuál es la idea general? Pero supongo que el punto es simplemente que de la misma manera que tienes elementos semánticos que sirven para un cierto propósito, los elementos de plantilla sirven para no renderizar en el DOM. Y eso es solo su carga en la vida.

Así que echemos un vistazo a algo de JavaScript usando... Sí. Muy bien. Primero, definimos una clase de componente web. Esto va a extender... Lo mismo que hemos estado haciendo desde que configuramos nuestros componentes personalizados. Tenemos nuestro constructor. Y tenemos super. Y luego tenemos nuestro callback de conexión.

Con la función de plantilla, cuando estás llamando a una función de plantilla, debes apuntar a la función de plantilla específica. La diferencia entre la función de plantilla y lo que hemos estado haciendo hasta ahora es que hemos estado definiendo todo este contenido en JavaScript hasta ahora. Como hemos estado creando divs y todo. Pero ahora lo tenemos en el propio DOM y lo vamos a renderizar aquí. Y luego lo colocamos en el componente.

Tenemos nuestro callback de conexión y vamos a obtener const templates. Eso va a ser similar a document.getElementById. Vale. Estoy bien. ID, ¿cuál era el nombre de esto? HTML template. Sí. HTML template. Otra cosa con la etiqueta de plantilla es que no funciona de la misma manera que los elementos regulares. Así que con los elementos regulares, si quisiera obtener su contenido, simplemente usaría innerHTML. Como hemos visto aquí, los componentes no tienen innerHTML. Lo que tienen es un fragmento, que no se puede seleccionar simplemente usando innerHTML. Entonces, cómo obtenemos el contenido en una etiqueta HTML es usando el contenido de la plantilla.

Entonces apuntamos a la plantilla y apuntamos al contenido y luego creamos un nodo a partir de este contenido. Básicamente, lo que está sucediendo aquí es que podemos hacerlo de forma profunda. Así que veamos cada una de estas cosas individualmente. Voy a poner todo en JavaScript porque así es como trabajo. contenido. Y vamos a definir este componente personalizado. Definir componente web. Componente web. Argumentos requeridos solo por uno presente. Eso no está bien. Hmm. ¿Qué? Sí, eso es lo que sucede con las demostraciones. Tomará 10 minutos. Y han pasado 30 minutos. Y tú, como, ¿qué? Muy bien, terminemos esto. Siento que tienes que creerme en cuanto al resto de las plantillas HTML. Pero también tengo todo el código configurado en mi motor de código porque soy el tipo de estudiante que hizo las tareas antes de que el profesor las asignara. Entonces, si quieres echarle un vistazo, tengo los enlaces en mis diapositivas. Voy a repasar el resto. Voy a llegar a las partes reales de React. Así que sí, plantillas HTML, blah, blah, blah, esto, aquello, eso. Y los componentes web son increíbles. Te permiten usar elementos HTML reutilizables. Me encanta eso. Pero tampoco requieren ninguna instalación, así que no necesitas configurar un proceso de compilación ni nada, simplemente puedes usarlos de inmediato. Mi parte favorita, son compatibles con varios frameworks, lo que significa que puedes usar tus componentes web en React, Angular, Vue o cualquier otro framework, y funcionarán. React versus componentes web, ¿cuál deberías usar? La documentación de React lo explica mejor cuando dice que React y los componentes web están diseñados para resolver problemas diferentes. Así que no es una competencia, no es una situación de esto o aquello, es una situación de esto y aquello. Estamos viendo cómo podemos combinar mejor los componentes web con React y hacer que funcione. Así que ambos. Ambos son buenos. Entonces, hay un sitio web llamado Custom Elements Everywhere y muestra cómo funcionan los elementos, cómo funcionan los componentes personalizados con cada framework. Por ejemplo, para Angular tiene una puntuación del 100%, se integra perfectamente con Angular. Para Vue, tiene una puntuación del 100%, se integra perfectamente con Vue. Para React? Podría ser mejor. Básicamente, el problema con eso es que React no permite la interacción con el DOM de la misma manera que lo hacen los componentes web. Entonces, si estás tratando de pasar un componente web, digamos que definimos un botón en un componente web y tenemos un evento onclick, eso no funcionará de la misma manera que en React. Porque React es React. Pero sí, íbamos a tener una demostración que no era todo el código que te mostré antes, iba a ser una demostración diferente, pero podemos hacerlo ahora, pero si ustedes quieren enlaces, si quieren el enlace a las diapositivas, lo tengo en mi sitio web, es jemimaabu.com/talks/webcomponents y si tienen alguna pregunta, no creo que tenga tiempo para preguntas, ya que he usado todo mi tiempo, pueden contactarme en Twitter o en mi sitio web jemimaabu.com y espero que hayan encontrado la charla interesante o que hayan aprendido algo, muchas gracias, www.jemimaabu.com