¿Cómo el Shadow DOM te tiene cubierto?

Rate this content
Bookmark

Aprendemos sobre las posibilidades de lo que DOM puede hacer, pero ¿alguna vez te has preguntado qué posibilidades puede tener Shadow DOM? Bueno, en esta charla te ayudaré a entender cómo el Shadow DOM te tiene cubierto. Profundizaremos aún más en cómo puedes usar React con Web Components.  

18 min
12 Dec, 2023

AI Generated Video Summary

El Shadow DOM permite la encapsulación y la composabilidad, permitiendo que los elementos tengan sus propias características sin afectar al resto de la página web. Los elementos personalizados en el Shadow DOM tienen su propio comportamiento a través de la encapsulación y los estilos de alcance. La composabilidad es clave en el desarrollo de software, permitiendo el paso dinámico de datos. El Shadow DOM proporciona una forma de modificar la apariencia de los elementos dentro de él, pero algunas propiedades están marcadas como importantes y no pueden ser cambiadas. Construir una extensión de Chrome usando el Shadow DOM permite experiencias componibles y encapsuladas.

1. Introducción al Shadow DOM

Short description:

El Shadow DOM es un árbol DOM oculto que se comporta de manera diferente al Light DOM. Permite la encapsulación y la componibilidad, permitiendo que los elementos tengan sus propias características y funciones sin afectar al resto de la página web. El Shadow DOM es diferente del Light DOM en cómo se crea en un elemento específico. Proporciona una forma de encapsular elementos, similar a cómo diferentes porciones de pizza tienen sus propios ingredientes. Esto permite una mejor organización y separación de la funcionalidad.

Entonces, hola a todos. Como pueden ver, el título de la charla es cómo el Shadow DOM te tiene cubierto. No, no te ha cubierto nunca. Te tiene cubierto. Y en la retrospectiva, seguro. Entonces, en esta charla rápida, vamos a ver cómo te tiene cubierto. Así que comencemos con la charla. Entonces, hola a todos. Soy Mukul y estoy trabajando como ingeniero de front-end en Hubilo. Aparte del trabajo, me gusta, soy muy apasionado de la música indie, los juegos de mesa y ¿quién no es apasionado de viajar? Entonces sí, ¿qué es el Shadow DOM? Para definirlo simplemente, es un árbol DOM oculto normal con diferencias en cómo se comporta con el resto del Light DOM. Entonces, dado el contexto de la charla, el DOM con el que interactuamos a diario. Añadimos, anexamos, eliminamos elementos. Es un DOM normal, ¿verdad? Y el DOM del que vamos a hablar, vamos a referirnos a ese DOM normal como un Light DOM y el DOM del que vamos a hablar extensamente es el Shadow DOM. Entonces, como pueden ver en la pantalla, este texto está en el Shadow DOM. Pueden ver que es un texto de marcador de posición, ¿verdad? Cuando intentan inspeccionar esto y cuando intentan averiguarlo, normalmente no encuentran este texto específico escrito en ningún lugar del DOM, pero está presente, muy presente. Está presente en el Shadow DOM. Mientras que este es otro ejemplo, como si ven un botón de elegir archivo, alguien debe haber escrito un botón CSS de él y cómo este elemento debería aparecer en línea y en el código. ¿Qué debería pasar cuando alguien hace clic en el botón de elegir archivo, pero todo lo que hacemos es escribir input type file y luego sucede la magia y este elemento aparece. Pero todo el CSS de esto ha sido escrito en algún lugar en el Shadow DOM. Entonces, sí, vamos a avanzar para saber más sobre el Shadow DOM. Entonces, ¿cómo es diferente del Light DOM? Entonces, como dije, el Light DOM es el DOM normal y ¿cómo es diferente de eso? Entonces, lo primero, es diferente en cómo este específico Shadow DOM se crea en un elemento específico. Entonces, por ejemplo, digamos que hay un elemento llamado, digamos un elemento div, pero quieres el elemento shadow para ese desarrollo puedes crearlo. Entonces, la forma en que lo creas y lo usas, difiere en esa área. Otra característica muy asombrosa y una de mis favoritas que trae el Shadow DOM es la encapsulación y la componibilidad. Entonces, piensen en esto, como, digamos que están comiendo una pizza y en una porción de pizza básicamente obtienen todas sus verduras, todos sus, todos sus ingredientes en una porción. Otra porción tendría su propio conjunto de ingredientes. Entonces, es como si esas porciones de pizza tuvieran todo en ellas encapsulado. Entonces, de la misma manera, el Shadow DOM tiene su propiedad de encapsulación y componibilidad. Teniendo su propia forma de características funciones y capacidad para actuar por sí mismo y en lugar de perturbar el resto de la funcionalidad en la página web. Si hablamos de la precedencia, digamos que un elemento tiene un DOM normal y

2. Shadow DOM y Componentes Web

Short description:

El Shadow DOM tiene una mayor precedencia que el Light DOM. Algunos elementos HTML tienen su propio Shadow DOM, como Textarea, el botón Elegir archivo, Video y Audio. Estos elementos vienen con funcionalidad y estilo preconstruidos. Sin embargo, no todos los elementos tienen su propio Shadow DOM. Para aprovechar los beneficios del Shadow DOM, podemos crear nuestros propios elementos, como un botón personalizado, utilizando componentes web y la API de Shadow DOM.

un Shadow DOM. Por lo general, se da preferencia al Shadow DOM. El Shadow DOM tiene una mayor precedencia que el Light DOM, esta es otra diferencia cuando se compara con el Light DOM. Bien, avanzando pero no todos tienen su propia sombra. Como tomamos el ejemplo de Textarea, tomamos el ejemplo del botón Elegir archivo. Hay otros ejemplos como Video y Audio. Si ustedes ven los elementos Video y Audio, tienen un botón de más, tienen una barra de búsqueda, tienen un botón de opciones, todos esos elementos nos vienen de mano. Simplemente agregamos una etiqueta video y ellos simplemente aparecen. Entonces alguien debe haber escrito un CSS y el código completo y la funcionalidad completa de eso. Todo eso reside en el Shadow DOM. Y la opción de selección, el menú desplegable, el CSS alrededor de eso, todo eso reside en un Shadow DOM. Pero no todos los elementos en los elementos HTML dados tienen su propio Shadow DOM. Por ejemplo, un elemento div, por ejemplo, un elemento span no tiene su propio Shadow DOM. Entonces necesitamos profundizar en cómo podemos obtener los beneficios del Shadow DOM de la manera que queremos, la forma en que queremos encapsularlo, la forma en que queremos agregar una naturaleza de componibilidad a nuestros elementos HTML. Entonces, una de las formas en que podemos crear un Shadow DOM, digamos que hay un elemento llamado encabezado y digamos que queremos adjuntar Shadow con modo abierto. Esta es una API de navegador que está disponible, Attach Shadow, que nos ayuda básicamente a adjuntar un Shadow DOM y una vez, adjuntar un Shadow DOM al elemento que acabamos de crear, un encabezado, y con este encabezado lo que podemos hacer es que podemos agregar un HTML interno y agregar un como Hola Shadow DOM y eso se agregaría a ese elemento como un Shadow DOM. Vamos a ver muy pronto cómo aparece en el navegador. Pero eso no es todo, ¿verdad? Si lo piensas aquí, no queremos adjuntar Shadow DOM a los elementos existentes. Podemos tener los nuestros propios, porque tienen sus propias propiedades, tienen su propia forma de comportamiento según el elemento, por ejemplo, input, encabezado, etiquetas H1, H2, y lo que sea. Cada elemento tiene su propio comportamiento. Entonces no queremos obstaculizar eso. En cambio, nos gustaría usar el Shadow DOM creando algo propio. Como tomemos el ejemplo de un botón. Digamos que quieres tener un botón donde tiene su propia forma de comportamiento, su propia forma de animación, su propia forma de dar título al botón. Entonces, el Shadow DOM, cuando hablamos del Shadow DOM, tenemos que traer a la imagen, tenemos que traer componentes web a la imagen. Entonces, componentes web. Hoy vamos a ver los componentes web un poco desde la perspectiva del Shadow DOM en lugar de traer el punto de vista de la reutilización. Ese aspecto también se cubrirá un poco. Entonces, si piensas, entonces si ves cómo puedo crear un componente web, básicamente un componente web, un elemento personalizado completo propio, como digamos que quiero crear mi botón genial, mi botón genial, y si quiero poner cualquier cosa aquí, ¿cómo lo haría? Simplemente crearía una clase. Desconectaría la devolución de llamada y la devolución de llamada desconectada serían las funciones como, sí, ahora que estamos en el evento react, la devolución de llamada conectada es básicamente cuando algo está montado en el DOM y la devolución de llamada desconectada es cuando el elemento se desmonta en el DOM, entonces obtienes esta devolución de llamada y basado en esta devolución de llamada, puedes agregar oyentes, puedes agregar CSS, puedes

3. Elementos personalizados y encapsulación

Short description:

Los elementos personalizados en el Shadow DOM tienen su propio comportamiento a través de la encapsulación. La raíz de sombra, adjunta al componente web, contiene sus propios estilos. Esto permite un DOM y estilos con alcance, asegurando que los estilos y el comportamiento del elemento personalizado no interfieran con otros elementos en la página web.

puedes agregar lo que quieras y puedes agregar un comportamiento a este usando este DOM. Así que puedo simplemente definir elementos personalizados o definir mi botón genial y eso estará disponible para un navegador para renderizar, como mi botón genial, y podremos usar esto, nuestro elemento personalizado y tendrá su propio comportamiento, ¿pero cómo tendría su propio comportamiento? Necesitaríamos agregarle encapsulación, ¿verdad? Entonces, si ves la encapsulación, he estado repitiendo esta palabra mucho, pero esta es una de las características muy interesantes del Shadow DOM. Entonces, lo que la encapsulación trae es un DOM con alcance y estilos con alcance. Entonces, si ves aquí, esta raíz de sombra, cuando en el constructor, cuando estoy inicializando mi componente web, hay una raíz de sombra. Estoy adjuntando una sombra a ella, y a esa raíz de sombra, en el HTML interno, lo que estoy haciendo es estoy dando el estilo por sí mismo. Entonces, si ves aquí, estoy dando nombres muy genéricos. Estoy dando main, main hover. Entonces, si piensas en esto, como main puede ser una clase que está disponible en la página web para cualquier otro elemento, para cualquier otro elemento padre. ¿Pero eso crearía un problema con esto? La respuesta es no. Porque el Shadow DOM tiene una propiedad de encapsulación y componibilidad. Entonces, si ves aquí, puedo dar tales clases, puedo dar estilos, y puedo usar esos estilos aquí en el elemento dev. Y lo que sucedería con eso es lo que sucedería con este elemento dev donde está escrito mi botón, puede tener sus propios estilos, puede tener

4. Componibilidad y Paso de Datos

Short description:

La componibilidad es clave en el desarrollo de software. Permite que los componentes sean potentes al permitir que los datos se pasen de manera dinámica. Al igual que en React, donde los datos se pasan usando props, los componentes web tienen slots que permiten pasar datos. Los slots proporcionan una forma de tener contenido de respaldo en caso de que no se pasen datos. Al pasar un nombre en el componente web, se puede mostrar en el slot, con una opción de respaldo si no se proporciona ningún nombre.

estilos propios como DOM y sitio de alcance. Así que sí, sigamos. Componibilidad. Componibilidad. Así que cada componente se vuelve poderoso cuando eres capaz de pasar los data. Así que como puedes ver, déjame ir a la diapositiva anterior, como puedes ver aquí, está escrito dev my button. Pero ¿qué tal la capacidad de cambiar el nombre del botón dinámicamente? Como quiero usar este componente, quiero usar los estilos, quiero usar la apariencia de esto, pero solo quiero seguir cambiando el nombre del botón, como sea el título del botón ¿puedes hacer eso? Sí. Y eso trae la componibilidad, que para, así que, solo una pregunta. Quiero decir, me gustaría, solo una pregunta para estoy seguro, sabes, esta respuesta, como ¿cómo pasamos los data a los componentes mediante el uso de react? La respuesta es props, ¿verdad? Así que, de la misma manera tenemos para tus slots, así que los slots nos permiten pasar los data a nuestros web components. Y con eso podemos, podemos tener con eso, podemos tener nuestro shadow down para tener sus propios estilos y comportamiento, ¿verdad? Así que si ves tu slot, estoy pasando un nombre icon y, y, y con eso, puedes ver que estoy dando una opción de respaldo también. Digamos que nuestros data no se pasan, ¿verdad? Así que, puedes ver que en dentro del slot puedo tener un contenido de respaldo y, y, y, y sí, quiero decir y, y si digo como slot name title, así que puedo tener un nombre de respaldo. Así que, todo lo que tengo que hacer es tengo que pasar el nombre, un nombre en el componente web y eso aparecería aquí. De lo contrario

5. Explorando el Shadow DOM

Short description:

Mirar en las sombras es importante. Tengo tres elementos HTML genéricos: un área de texto, un selector de archivos y un desplegable, así como un botón personalizado. Al acceder al Shadow DOM, puedo modificar la apariencia de los elementos dentro de él. Sin embargo, algunas propiedades están marcadas como importantes y no se pueden cambiar. Lo mismo se aplica a otros elementos como título y select. Mi botón personalizado tiene un slot llamado 'título' donde puedo insertar contenido.

el respaldo aparecería si no estoy pasando. Genial. Sigamos, sigamos. Antes de seguir a esta diapositiva de encontrar propósito, quiero mostrarte rápidamente cómo puedes mirar el Shadow DOM. Mirar en las sombras es una de las cosas más importantes. Como puedes ver aquí, tengo tres elementos HTML genéricos. Uno es un área de texto, otro es un selector de archivos, otro es un desplegable y tengo un botón muy interesante que es un botón personalizado que he creado. Así que solo crearé uno, iré aquí. Iré a los ajustes, puedes ver la pestaña de ajustes. Haré clic aquí y puedes ver que aquí, cuando voy a esta cosa de elementos en el sitio de preferencias, puedes ver que muestra el Shadow DOM del agente de usuario. Si hago clic en esta casilla de verificación, y si cierro esto, si voy aquí y si selecciono esto, puedes ver aquí que algo aparece aquí. Como puedes ver que esto, es, es algo llamado una raíz de sombra. Y en esa raíz de sombra, puedes ver que un pseudo, un pseudo selectores donde podemos cambiar el color de este texto como este texto está en Shadow DOM. Y simplemente puedes, como, como puedo simplemente hacer C-U-L-O-R color azul. Puedes ver que el marcador de posición del color, el color del marcador de posición cambia a azul, uh, que es algo que reside en el Shadow DOM. Uh, pero, pero no puedes realmente cambiar la visualización de esto porque, porque se le ha dado una importancia. Sí, mientras abro en el navegador puedes hacerlo, pero desde el punto de vista del código no puedes, pero si algo se da como importante en el Shadow DOM, es importante. Quiero decir, quiero decir que es algo que no puedes cambiar. Así que también ofrece una forma muy interesante de registrar algunas de las cosas que querías. Uh, si quieres algunos comportamientos para ello. Genial. De la misma manera, si tú, si miras este elemento como título, uh, de la misma manera, como si yo, si hago clic aquí, si voy aquí en el, en el Shadow DOM, puedes ver que hay un botón, hay un shadow road, que, que, que da el botón de este retorno de archivo elegido. Y tú puedes, también podemos cambiar el texto si queremos. Así que sigamos, lo mismo ocurre con el select. Pero aquí hay una cosa interesante, aquí está mi botón. Puedes ver que aquí. He creado un elemento HTML llamado este mi botón. Y aquí he dado un slot. He dado un slot llamado como título. Así que cómo he definido esto, lo que he dado un elemento span dentro del mi botón, dentro del mi botón. Si hago clic en el mi botón, puedes ver en el mi botón, he escrito un span con slot título, y he dado un elemento que hace título.

6. Explorando Shadow DOM y Encapsulación

Short description:

El slot dentro del Shadow DOM toma el nombre del elemento pasado. Por ejemplo, al pasar un título a un botón, se mostrará el título. Sin pasar un título, se muestra el nombre de respaldo 'botón'. La encapsulación incluye estilo, estado inicial y todo el DOM.

Entonces, lo que hace es que puedes ver que hay un slot aquí, que me lleva dentro del Shadow DOM. Y dice que cada vez que pasas algo con el slot, se escribirá esto como ... tomará su nombre. Así que solo para tomar otro ejemplo aquí, solo para probar este ejemplo, puedes ver que estoy pasando tu título. En este mi botón, estoy pasando un título. Si lo elimino, ¿qué pasa si no paso esto en absoluto? Solo estoy pasando un mi botón. Y en el momento en que lo refresco, puedes ver que antes era título y ahora se convirtió en botón ... porque el nombre de respaldo que he dado es botón. Y además puedes ver que he encapsulado el estilo, el estado inicial y también he encapsulado el DOM completamente.

7. Construyendo una Extensión de Asistencia de Vocabulario para Chrome

Short description:

Permíteme mostrarte lo que he construido y puedes construirlo muy fácilmente. Vamos a construir una extensión de asistencia de vocabulario para Chrome que puede ser utilizada en toda la web. Al inyectar código en cualquier página web, podemos seleccionar una palabra y hacer que su significado aparezca justo allí. La extensión utiliza la raíz de sombra para insertar la respuesta y tiene su propia naturaleza componible.

Pero sí, entiendo tu punto, estás como Mukul, bien, esto es genial pero ¿dónde lo usaría? Así que esto es uno de los pensamientos muy interesantes que encontré. El conocimiento es saber que un tomate es una fruta, la sabiduría es no ponerlo en una ensalada de frutas. Permíteme mostrarte lo que he construido y puedes construirlo muy fácilmente. Así que lo que vamos a construir es ... revisaremos este modo de construcción y compartiremos el repositorio. Lo que vamos a construir es ... así que cuando era niño siempre me preguntaba como cuando estoy leyendo en Internet, solo quiero seleccionar una palabra. Quiero seleccionar una palabra y cuando selecciono esa palabra, quiero tener el significado de esa palabra. En el momento en que selecciono una palabra, mi significado debería aparecer justo ahí y entonces, sea cual sea la página web, en cualquier página web que sea. Así que básicamente lo que tendría que hacer es que tendría que inyectar un código dentro de cualquier otra página web. Y con eso, quiero usar eso. ¿Cómo lo he hecho? He creado una extensión muy, muy pequeña. Puedes ver que es muy ... puedes ver aquí que la clase significativa, así que la extensión de Chrome que el nombre que le he dado es significativa. Y lo que puedes ver es aquí esto está disponible tu asistencia de vocabulario en cualquier lugar de la web, pero puede parecer que es algo complejo, pero te mostraré cómo en solo unas pocas líneas de código, puedes literalmente construir una asistencia de vocabulario y eso puede ser utilizado en toda la web. Así que puedes ver que el ... aquí estoy haciendo inner HTML. Aquí estoy haciendo ... adjuntando etiquetas de estilo y aquí estoy haciendo ... y aquí estoy usando el ... simplemente usando un enorme ... estoy usando un significado de palabra, que básicamente me busca una palabra cuando la selecciono. Cuando la selecciono, en el momento en que selecciono esa palabra, simplemente estoy insertando esos ... lo que sea que la respuesta que he obtenido ... dentro de la raíz de sombra. Ahora que tiene mis propios estilos, puedo acceder a esos elementos por ID porque tiene su propia naturaleza componible, ¿verdad? Tiene su propio doc de alcance, doc de alcance. Simplemente estoy añadiendo los data que están llegando a la respuesta y después de eso hay un cambio de selección donde el usuario selecciona una palabra y queremos mostrar el significado. Llama a la API usando una función de rebote de suite aquí para que cuando queramos ... para que el Evento de Selección Múltiple no llame a las múltiples APIs y aquí, cuando se selecciona una palabra, mantenemos la opacidad uno y cuando se elimina la selección, eliminamos esa opacidad.

8. Profundizando en el Shadow DOM

Short description:

Puedes sumergirte en el código y ver una demostración en GitHub. Al seleccionar una palabra, puedes ver su significado aparecer. Para construir experiencias similares, utiliza un Shadow DOM con total componibilidad y su propio estilo y div. Shadow DOM proporciona encapsulación y componibilidad, que son características clave para construir aplicaciones interesantes.

Como dije, esto es algo en lo que puedes profundizar. Puedes sumergirte en el código. Así que permíteme mostrarte rápidamente la demostración de esto. Digamos que estoy en GitHub y digamos que estoy en ... ¿dónde estoy? Vale, así que solo ... así que si hago clic en un mapa de ruta, puedes ver algo ... puedes ver que se carga un pop-up, mapa de ruta, un mapa con una representación visual. Puedes ver eso. Podemos ver claramente su significado. Así que si selecciono esta palabra y puedes ver que aparece el significado de optimization, fundamentos, ¿verdad? Aparece un significado. Así que experiencias como esta. Si quieres construir experiencias como esta, ¿qué usarías? Usarías algo como un Shadow DOM. Así que puedes ver aquí, si voy aquí, puedes ver que lo único que estoy inyectando es significativo, que es el nombre del elemento, elemento HTML. Y en ese elemento, tengo total componibilidad de mi ruta de sombra y tiene su propio estilo. Tiene su propio div, componibilidad propia. Así que sí, creo que realmente insistí mucho en la componibilidad y la encapsulación. Y como una de las características muy interesantes, una de las aplicaciones muy interesantes que te mostré, como cómo puedes usar la encapsulación y la componibilidad.

Así que eso es todo. Y así es como Shadow DOM te tiene cubierto. Puede que no lo notemos pero en algún momento, nos ha cubierto. Así que eso es todo. Gracias, y se aceptan preguntas.

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