Hablemos de los Componentes Web

Rate this content
Bookmark

Antes del surgimiento de algunos de los frameworks más populares (léase: React y Vue), existían los componentes web. Los Componentes Web toman una de las mejores partes de estos frameworks (componentes reutilizables) y los combinan con las mejores partes del desarrollo web (soporte nativo del navegador y no necesidad de configurar un proceso de compilación). Y por si eso no fuera suficiente, los componentes web te permiten usar las mismas funciones en cualquier framework.

Si en este punto te estás preguntando "Si los componentes web son tan increíbles, ¿por qué no he oído hablar de ellos antes?", entonces estás de suerte porque eso es exactamente de lo que trata esta charla.

En esta presentación, echaremos un vistazo a qué son los componentes web, por qué son geniales, por qué pueden ser un dolor de cabeza y cómo podemos utilizar los componentes web tanto como una herramienta independiente como junto con los frameworks.

32 min
22 Oct, 2021

Video Summary and Transcription

Los Componentes Web son un conjunto de tecnologías que te permiten crear elementos HTML reutilizables, combinando la diversión de React con HTML regular. Los elementos personalizados y el DOM sombreado son características clave de los Componentes Web, que te permiten definir nuevos elementos, encapsular funcionalidad y estilos, e interactuar con un DOM separado. Las plantillas HTML sirven como marcadores de posición para el contenido que se renderizará más tarde en los componentes personalizados. Los elementos personalizados y las plantillas HTML son compatibles con múltiples frameworks y se pueden utilizar en React, Angular, Vue o cualquier otro framework.

Available in English

1. Introducción a los Componentes Web

Short description:

Hablemos de los componentes web. Soy un desarrollador frontend autodidacta y un ingeniero de sistemas escolar de Lagos, Nigeria. Me gusta construir cosas con HTML y CSS. Cuando estaba aprendiendo React por primera vez, no entendía por qué las cosas eran como eran. Prefiero usar HTML. Los componentes web son un conjunto de tecnologías que te permiten crear elementos HTML reutilizables. Es como usar HTML regular, pero con toda la diversión de React. Los elementos personalizados son una API que te permite definir nuevos elementos y su comportamiento. El shadow DOM te permite encapsular elementos, funcionalidad y estilos.

Así que probablemente debería presentarme primero. Soy un desarrollador frontend autodidacta y un ingeniero de sistemas escolar de Lagos, Nigeria. Estoy lejos de casa, pero ahora vivo en Londres, así que no tanto. Y me puedes encontrar en línea en cualquier lugar como JemimaAbu. Así que eso es LinkedIn, Twitter, Medium. Hago que mi nombre de usuario sea fácil, para que no tengan que estresarse para stalkearme. Todo está ahí.

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.

2. Plantillas HTML y Elementos Repetidos

Short description:

Esto es lo que te permite eliminar tus elementos personalizados del flujo regular de la página y tenerlos en un DOM diferente. Y finalmente tenemos las plantillas HTML. 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. Primero vamos a ver cómo se ve en HTML regular. El HTML regular es simplemente pegar el div con el mismo contenido en todas partes. 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, suelo crear una matriz con todo el contenido que necesito y luego lo renderizo en la página usando JavaScript vanilla.

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...

3. Definición de Elementos Personalizados en JavaScript

Short description:

Defines tu publicación encapsulando el código HTML dentro de una función y renderizándolo en la página. Esta es la idea básica detrás de los Componentes Web. Los elementos personalizados te permiten definir tus propias etiquetas HTML utilizando JavaScript. Tienen un método de ciclo de vida y se definen utilizando la API de elementos personalizados. La etiqueta HTML personalizada se renderiza en el DOM. Veamos cómo se vería un elemento personalizado si lo colocáramos en el DOM. Defines tu clase utilizando la palabra clave 'extend', similar a React.

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.

4. Extensión de Elementos HTML con Componentes React

Short description:

Utilizarías la palabra clave 'extend' del componente React. En este caso, extendemos la palabra clave del elemento HTML. Debido a que es un componente de clase, debemos inicializar nuestro constructor. Y luego, al trabajar 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. Entonces, básicamente, lo que queremos hacer es que nuestra clase devuelva 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.

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.

5. Creación de un Componente de Publicación Personalizado

Short description:

Para definir nuestro elemento personalizado, usamos customElement.define, pasando el nombre de nuestro componente personalizado y la clase de componente que creamos. Al llamar al componente, simplemente pasamos el contenido deseado. Codificar en público puede ser desafiante.

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.

6. Introducción al Shadow DOM

Short description:

Básicamente, hemos logrado renderizar el título de la publicación, el contenido y las fechas como queremos que aparezcan en la página. Ahora vamos a introducir el Shadow DOM. El Shadow DOM es una forma separada del DOM que te permite agregar documentos a tus elementos sin afectar el DOM real. Es como la técnica de clonación de sombras en Naruto, donde la sombra es una extensión de ti mismo pero no te afecta. Cuando extiendes el Shadow DOM, lo que sucede dentro de él no afecta al DOM real.

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.

7. Llamando al Shadow DOM en Web Components

Short description:

Para llamar al Shadow DOM en los componentes web, utilizamos el método attachshadow y establecemos el modo en abierto. Esto crea una nueva instancia de la raíz de sombra, que es la base del Shadow DOM. La raíz de sombra es el objetivo para aplicar estilos en 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.

8. Cómo funciona el Shadow DOM

Short description:

Entonces, cada nueva instancia del Shadow DOM es independiente de la página real, como si tuvieras un iframe. La etiqueta de video muestra un video real en la página, pero no se ve afectada por los demás elementos en la página. Los videos tienen su propio estilo, pero el estilo encapsulado en el video no afecta a ningún otro estilo en la página. Y te permite interactuar con las raíces de sombra.

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.

9. Creando Componentes de Sombra

Short description:

Y luego creamos nuestros elementos de sombra, inicializamos nuestros constructores y llamamos a attachShadow con el modo abierto. El modo abierto permite interactuar con el Shadow DOM. Si el modo está cerrado, no se pueden agregar elementos al Shadow DOM. Esto se usa comúnmente para incrustaciones. Se crea la raíz de sombra y se agrega un elemento a ella. El constructor de clase para el componente de sombra se define utilizando elementos personalizados. Finalmente, probamos si el componente de sombra funciona.

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.

10. Componentes de Sombra y Callback Conectado

Short description:

En el componente de sombra, se abre una nueva raíz de sombra. También podemos pasar atributos a componentes personalizados para que se representen como datos. El callback conectado es como el useEffect de los componentes web.

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.

11. Definición de Estilos del Shadow DOM

Short description:

Ahora tenemos nuestro shadow.innerHTML. Definimos los valores para el título y el texto de datos. El texto de sombra se convierte en un espejo de nuestra publicación. Sin embargo, el shadow DOM no hereda los estilos del DOM global. Para estilizar los elementos de sombra, necesitamos definir sus estilos en componentes personalizados.

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.

12. Entendiendo el Shadow DOM

Short description:

Podemos definir una etiqueta de estilo dentro del elemento de sombra, y solo afectará al elemento de sombra. La encapsulación mantiene separado el shadow DOM del tag global. Así es como funciona la parte de sombra.

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.

13. HTML Templates and Their Purpose

Short description:

Las plantillas HTML son etiquetas que no se muestran en la página HTML. Sirven como marcadores de posición para el contenido que se renderizará más tarde utilizando JavaScript en componentes personalizados.

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.

14. Using Template Elements in Web Components

Short description:

Los elementos de plantilla sirven para no renderizar en el DOM. Echemos un vistazo a algo de JavaScript. Primero, definimos una clase de componente web que extiende el constructor y el callback de conexión. La función de plantilla nos permite definir contenido en el propio DOM y renderizarlo en el componente. Obtenemos el contenido de una etiqueta de plantilla utilizando el contenido de la plantilla.

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.

15. Targeting Templates and Content in Web Components

Short description:

Entonces apuntamos a la plantilla y apuntamos al contenido y luego creamos un nodo a partir de este contenido. Podemos hacerlo de forma profunda. Siento que tienes que creerme en cuanto al resto de las plantillas HTML. Las plantillas HTML te permiten usar elementos HTML reutilizables sin necesidad de instalación. Son compatibles con varios frameworks, lo que significa que puedes usarlas en React, Angular, Vue o cualquier otro framework. React y los componentes web están diseñados para resolver problemas diferentes, por lo que no es una situación de competencia. Custom Elements Everywhere muestra cómo funcionan los componentes personalizados con cada framework.

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

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Day Berlin 2022React Day Berlin 2022
34 min
It's Time to De-Fragment the Web
Top Content
Over the past few years, the number of web frameworks available to us has exploded. In some ways, the breadth of choice is a clear win for our ecosystem. However, for many of us, it also comes with harsh drawbacks: - Have you ever used a popular open-sourced component built for framework A, and wished it existed in framework B? What about a design system library? - Does your company have frontends built in different frameworks, and your web teams are frustrated about the wasted hours needed to achieve a consistent design system? - Does your team build SDKs for web frameworks, and must manually re-write them for each framework? The solution to all 3 of these problems exists today. To fully understand it, we must first examine today’s web frameworks, re-think what a component should look like, and introduce a new Intermediate Representation of our components. This is what we have done at Builder.io when we created Mitosis, and we’re excited to share it with everyone.
JSNation 2023JSNation 2023
29 min
The Good, The Bad, and The Web Components
There has been no shortage of both fair and unfair criticism toward Web Components from a wide range of folks that build for the web, including but not limited to JavaScript Framework authors in supposed competition with the platform. In this talk I'll show you how to navigate and simplify the multifaceted landscape of web components, satisfying common criticisms and showing how you can Use the Platform most effectively today.
JSNation Live 2021JSNation Live 2021
28 min
Web Components, Lit and Santa 🎅
Get started with Web Components – enabling you to define new HTML elements that work everywhere regular HTML does. This talk will focus on Lit, a suite from Google that helps you create WCs with features you'd expect like data-binding and declarative definitions. It'll also cover how we've used them to build one of the web's jolliest sites, Google's Santa Tracker 🎅
React Summit US 2023React Summit US 2023
21 min
Authoring HTML in a JavaScript World
 In this talk, Tony shows how an authoring and semantic HTML-first approach to JSX template work leads to more readable, maintainable, and accessible UI components. He demonstrates how to think through implementing a UI prototype in a semantic way, authoring HTML before visuals. He shows how accessible markup improves performance, reduces DOM size, minimizes time spent on CSS, and reduces cognitive load not only for developers, but also for all our users, no matter how they consume our sites and applications.
JSNation 2022JSNation 2022
20 min
Immutable Web Apps
Resolving dependencies when they are all bundled together is easy. Resolving dependencies when they are in being loaded via script tags is much more challenging. The goal of this talk is to explain how Meltwater handles dependency resolution when building native Web Component based applications that rely on packages published by many different teams.
JSNation 2022JSNation 2022
10 min
Web Components are awesome!
Ever wondered how by placing "video" or "audio" into your HTML, you get a media player with controls included? Or how, depending on the type attribute, "input" can be a button, a place to enter text, select a date or file, color picker and more? What if you could create your own element? The answer: Web Components! 🤯 In this talk, we’ll take a look at what Web Components are, how to make one and include it into an application.

Workshops on related topic

JSNation Live 2021JSNation Live 2021
184 min
Web Components in Action
Workshop
The workshop extends JavaScript programming language knowledge, overviews general software design patterns. It is focused on Web Components standards and technologies built on top of them, like Lit-HTML and Lit-Element. We also practice writing Web Components both with native JavaScript and using Lit-Element. In the end we overview key tooling to develop an application - open-wc.