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

Mukul Ramchandani
Mukul Ramchandani
18 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

Available in English

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

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

The Good, The Bad, and The Web Components
JSNation 2023JSNation 2023
29 min
The Good, The Bad, and The Web Components
Top Content
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.
It's Time to De-Fragment the Web
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.
Web Components, Lit and Santa 🎅
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 🎅
Authoring HTML in a JavaScript World
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.
Immutable Web Apps
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.
Web Components are awesome!
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

Web Components in Action
JSNation Live 2021JSNation Live 2021
184 min
Web Components in Action
Workshop
Joren Broekema
Alex Korzhikov
2 authors
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.