1. Introducción al Shadow DOM
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
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
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
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
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
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
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
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.
JSNation 2023
React Day Berlin 2022
JSNation Live 2021
React Summit US 2023
DevOps.js Conf 2022
Comments