JavaScript
Shedding Light on the Shadow DOM
Learning how, when, and why to use the shadow DOM
<p>In the world of design systems and component libraries, developers need to build encapsulated components so they can confidently use them anywhere in an application. The shadow DOM serves to provide this encapsulation, and ensure that a component’s styles and functionality are not affected in the context of a complete application. In this talk, we’ll learn what the shadow DOM is and how to use it when building reusable components. We’ll use Stencil, a web components compiler, to demonstrate the common use cases of the shadow DOM, and where it fits in the context of a design system.</p>
Using the shadow DOM effectively requires a few strategies that may not be well known to developers who only use the light DOM. In this talk, we’ll see how to take advantage of all kinds of common styling paradigms, from using CSS frameworks to global styles for multiple components, all while maintaining style encapsulation. The shadow DOM, like any tool, should only be used for certain situations, and so we’ll look at when to use and when not to use the shadow DOM. For the times when we can’t use the shadow DOM, we’ll see what other strategies we can use to still achieve encapsulation.
Additional information
| Type | devroom |
|---|
More sessions
| 2/5/22 |
<p>A short introduction about JavaScript Devroom with some interesting resources about JavaScript and a presentation about this special day for the FOSDEM JS Devroom.</p>
|
| 2/5/22 |
<p>Did you face the difficulty of choosing a right architecture solution for a specific project or a client while considering their “rather” complex environment? Do you feel like you need to change your tech stack continuously?</p> <p>If the answer is yes to both of the questions, join my talk about the solutions I’ve found so we can ca discuss your best practice as well.</p> <p>Accelerators (technology kits) are opinionated yet pragmatic that I’ve identified and tested on the projects ...
|
| 2/5/22 |
<p>From loading Ajax requests in browsers to have full-blown frameworks; Javascript has come a long way. While moving stuff from backend to frontend the problems of backend are also ported. The Bigger the code gets bigger the problems, more dependencies, harder maintainability, eventually all the problems of a huge monolith. With MicroFrontends, we can break this monolith into smaller independent, maintainable apps. Sounds good? Let’s see how in this talk.</p>
|
| 2/5/22 |
<p>Behavior Graph is a software architecture and state management library. It greatly enhances your ability to write complex user facing software and control systems.</p> <p>Broadly speaking, it belongs to the category of libraries which includes Redux, MobX, Rx (Reactive Extensions), and XState.</p> <p>It works by providing a new unit of composition which we call the behavior. Behaviors are simple blocks of code together with their dependency relationships.</p> <p>We developed Behavior Graph to ...
|
| 2/5/22 |
<p>We keep on hearing about the metaverse but what is it and more importantly, can JS be used to build it?</p> <p>We'll briefly clarify what the metaverse is and give practical examples today with federated virtual reality servers managed by different persons.</p>
|
| 2/5/22 |
<p>(With a $4 microcontroller to build fun, accessible, and unique forms of interaction)</p> <p>The magic of computers and smartphones is the fact that they provide a very malleable interface - the screen. Without having to manufacture extra parts for every new application, this is a massive time and cost saving for engineers. However, this comes at a cost of accessibility and usability, as well as diminishing the physical connection one might have to the device they are using. Physical ...
|
| 2/5/22 |
<p>I want to explain how to build data-intensive Jamstack apps with outstanding performance, low costs, and scalability while having great developer experience.</p>
|
