Let's talk about Web Components

Rate this content
Bookmark

Before the dawn of some of the most popular frameworks (read: React and Vue), there was Web components. Web Components take one of the best parts of these frameworks (reusable components) and combine it with the best parts of web development (native browser support and not needing to set up a build process). As if that's not enough, web components allow you use the same functions across any framework.

If at this point, you're wondering "If web components are so awesome, why haven't I heard about them before?", then you're in luck because that's exactly what this talk is about.

In this presentation, we'll take a look at what web components are, why web components are awesome, why web components can be a pain and how we can use web components both as a standalone tool and together with frameworks.

32 min
22 Oct, 2021

Video Summary and Transcription

Web Components are a suite of technologies that allow you to create reusable HTML elements, combining the fun of React with regular HTML. Custom elements and the shadow DOM are key features of Web Components, allowing you to define new elements, encapsulate functionality and styles, and interact with a separate DOM. HTML templates serve as placeholders for content to be rendered later in custom components. Custom elements and HTML templates are cross-framework compatible and can be used in React, Angular, Vue, or any other framework.

Available in Español

1. Introduction to Web Components

Short description:

Let's talk about web components. I'm a self-taught frontend developer and a school taught systems engineer from Lagos, Nigeria. I like to build things with HTML and CSS. When I was first learning React, I didn't understand why things were the way they were. I prefer using HTML. Web Components are a suite of technologies that allow you to create reusable HTML elements. It's like using regular HTML, but with all the fun of React. Custom elements are an API that allow you to define new elements and their behavior. The shadow DOM allows you to encapsulate elements, functionality, and styles.

Let's talk about web components. So I should probably introduce myself first. I'm a self-taught frontend developer and a school taught systems engineer from Lagos, Nigeria. So I'm a long way from home, but I live in London now, so not that long. And you can find me online anywhere at JemimaAbu. So that's LinkedIn, Twitter, Medium. I make my username easy, so you guys don't have to go to stress to stalk me. It's all there.

All right. So let's get into it. Web components, what are they? So I'd like to preface by saying why I wanted to give this talk. I like to build things with HTML and CSS. I'm not a huge fan of JavaScript. When I was first learning React, I didn't understand why things were the way they were. I didn't understand why I had to use set states to change a state property, but then you couldn't just change it as a variable. It didn't make sense to me. So personally I prefer using HTML.

What I don't like about HTML is if I want to create six blocks of the same thing, I have to copy and paste the same thing many times over. And that's what I do like about React. And I was like, is there a way to have the simplicity of HTML with the reusability of React? And the answer was Web Components. So basically Web Components are a suite of technologies that allow you to create reusable HTML elements. So right off the bat, they're already there in your browser. You don't need to do any installation. It's like using vanilla HTML. Is that what it's called? It's like using regular HTML, but with all the fun of React.

And how does it work? So first of all, we have our custom elements. Custom elements are an API that allow you to define new elements and their behavior. So you can create your own HTML tags to use. And then we have the shadow DOM, which sounds very cool and I like it. Which allows you to encapsulate elements, functionality, and styles.

2. HTML Templates and Repeating Elements

Short description:

So this is what allows you to remove your custom elements from the regular flow of the page and just have it in a different DOM. And then finally we have HTML templates. So I was going to go through a little bit of code to show what I'm talking about. This is a simple blog template that we create in regular HTML. So if you're using regular HTML for this, it's just a lot of copying and pasting and changing the content. So first we're gonna look at what it looks like in regular HTML. The regular HTML is just a lot of pasting of the div with the same content everywhere. And then we have the method I usually use when I'm trying to repeat things. So on my portfolio page, if I was trying to repeat the websites I've built, I usually just create an array with all the content I need and then I render that on the page using vanilla JavaScript.

So this is what allows you to remove your custom elements from the regular flow of the page and just have it in a different DOM. Which is fun. And then finally we have HTML templates. So these are the custom tags that you're actually rendering on the pages. Yeah.

So I was going to go through a little bit of code to show what I'm talking about. So this is a simple blog template that we create in regular HTML. So if you're using regular HTML for this, it's just a lot of copying and pasting and changing the content. So let's see some code. Which is the part I'm good at. All right.

So first we're gonna look at what it looks like in regular HTML. Click. So we have this... We have our code up here. And the regular HTML is just a lot of pasting of the div with the same content everywhere. So I'm gonna zoom in. There we go. So you can see you just have the post div and it's just repeated multiple times throughout the page. Because that is what HTML does. It does not give you variety in how you decide to code. And then we have the method I usually use when I'm trying to repeat things. So on my portfolio page, if I was trying to repeat the websites I've built, because I use basic HTML to build my portfolio page, instead of having to write them all at the same time and then just changing the content, I usually just create an array with all the content I need and then I render that on the page using vanilla JavaScript. So if we're going to do that for this... It's a hard scroll bar. If we're going to do that for this thingy, it would look something like this. So I was meant to be live coding, but then I realized that that's just... I am not brave enough to write code live. Sometimes things go wrong and I break down, and I'm not doing that. So if you were doing this with vanilla JavaScript, it would be something like...

3. Defining Custom Elements in JavaScript

Short description:

You define your post by encapsulating the HTML code inside a function and rendering it on the page. This is the basic idea behind Web Components. Custom elements allow you to define your own HTML tags using JavaScript. They have a life cycle method and are defined using the custom elements API. The custom HTML tag is rendered in the DOM. Let's take a look at what a custom element would look like if we were putting it in the DOM. You define your class using the extend keyword, similar to React.

You define your post. So this is basically all the HTML that was repeated previously, and we just have it inside a function. And then you just render it on the page. So in this one, I did it with a button that you can click to add new posts and then you can add as many as you like. But then when you render it with a page, it's pretty much just defining document, create elements, and then appending that element to the container that we want our code to be inside. So that's pretty much how this works with vanilla JavaScript.

So this is the basic idea behind Web Components. It's taking your HTML and appending them to your DOM. But then because the idea behind Web Components is being able to have encapsulated and reusable It's like a bit of a mixup. So we'll see how we can get a bit more complicated than this. By going back.

So let's talk about custom elements. Custom elements are the first part of Web Components. And as we have said, they are elements that allow you to define your own HTML tags. So this is what defining the custom elements in JavaScript would look like. You define your custom components as a class and then use the custom elements API to define this new class that you've created. And then you can call it in your HTML using your custom tag. So it's like fairly straightforward. So custom elements allow you to define custom HTML tags. The only syntax is that they have to have a dash in them. So you have your custom elements.define, and the one with the dash is the HTML that you will render on the page. Then you render your custom HTML tag in the DOM. And it also has a life cycle method. So let's take a look at what a custom element would look like if we were putting it in the DOM. Going back... This part I will write a little code. All right, so like we said, when you want to create your custom component, first of all you have to define your class. So I'm just going to create a class and I'm going to call it a post component. And you use the extend keyword. So it's pretty much the same way in React.

4. Extending HTML Elements with React Components

Short description:

You would use the extend React component keyword. In this one we extend the HTML element keyword. Because it's a class component we do have to initialize our constructor. And then when you're working with custom elements, you have your own life cycle methods. The same way you have like... UseEffects in React. And custom components, it's called... It's called something callback. So, basically, what we want to do is we want our class to return the contents that we had in our page previously that made the post. So, you can just create... We're going to set this the inner HTML. So, this is going to target... Once we initialize the post component, on the page, it's going to target that post component. And set the inner HTML to whatever we're defining inside this template literal. So, let's put a title.

You would use the extend React component keyword. In this one we extend the HTML element keyword. Totally forgotting what the syntax is. Yes, that was right. Is there a dot? Is there not a dot? HTML element keyword and then that's pretty much it. Because it's a class component we do have to initialize our constructor. And we just do your constructor and we call your super thing. And that's that.

And then when you're working with... I feel like this is very common for people who use React a lot. I just like to say I'm very glad functional components are a thing. I was not a fan of class components. So once you've initialized your constructor, then with custom elements, you have your own life cycle methods. The same way you have like... UseEffects in React. And custom components, it's called... It's called something callback. Oh. Well, anyway. I can't remember. I'm not going to stress myself. I'm going to put it in here.

So, basically, what we want to do is we want our class to return the... The contents that we had in our page previously that made the post. So, you can just create... We're going to set this the inner HTML. So, this is going to target... Once we initialize the post component, on the page, it's going to target that post component. And set the inner HTML to whatever we're defining inside this template literal. So, let's put a title.

5. Creating a Custom Post Component

Short description:

To define our custom element, we use customElement.define, passing in the name of our custom component and the class component we created. When calling the component, we simply pass in the desired content. Coding in public can be challenging.

Yep. Give this a class title. I'm just going to call this post title. And h2. We're going to give it some content. Content. I need to put some lorem ipsum in there. Because if you don't put lorem ipsum, how are you even coding? And then we're going to give it a span. Date span.

And finally, we're going to define our custom element here. So it's going to be custom element dot define. We pass in the name of our custom component, which is post component. And then we pass in the class component we just created up there. All right. And then finally, when we want to call that component, we just pass in the actual thingy. All right, I have to close this. Oh, I have an error. That's fun. Let's see. Of course not. That'd be too easy. All right. No, I need to define this. No, I don't. Pause. Fun fact, it's elements, not element. There we go. It worked. All right, coding in public is never fun. But okay.

6. Introducing the Shadow DOM

Short description:

So basically, we've managed to render the post title, content, and dates how we want them to appear on the page. Now let's introduce the shadow DOM. The shadow DOM is a separate form of the DOM that allows you to add documents to your elements without affecting the real DOM. It's like the shadow clone technique in Naruto, where the shadow is an extension of yourself but doesn't affect you. When you extend the shadow DOM, what happens inside it doesn't affect the actual DOM.

So basically what we have here is we've managed to render the post title, the content, and the dates how we want it to appear on the page. Now this is how we work with custom elements.

So let's take a look at what happens when we introduce the shadow DOM. This is what it looked like before. And then the shadow DOM. I'm a huge fan of the shadow DOM just because it sounds like a really cool shadow jitsu method. There was the DOM and then there's the shadow DOM. But basically what the shadow DOM is is that it's a separate form of a DOM. It's something that allows you to add documents to your elements to your document tree without affecting the real DOM. You know how in Naruto, the shadow clone is just an extension of themselves? Sorry if I'm going full nerd, but that's how it made sense in my head. The shadow is an extension of yourself, but what happens to the shadow doesn't happen to you. So kind of the same thing with the DOM. When you extend the shadow DOM, what happens in the shadow DOM does not affect the actual DOM. And that's how the shadow DOM works.

7. Calling the Shadow DOM in Web Components

Short description:

To call the shadow DOM in web components, we use the attachshadow method and set the mode to open. This creates a new instance of the shadow root, which is the basis of the shadow DOM. The shadow root is the target for styling in the shadow DOM.

So with web components, when we want to call the shadow DOM, we already have our custom component that we've defined, and then inside of that, we call this.attachshadow, and we set the mode to open. Setting the mode to open is what allows us to see the element that we're putting the shadow DOM on. Once you've called your attachshadow DOM, that's what creates a new instance of the shadow root. The shadow root is what we're targeting. So in regular HTML, you have your actual root tag. That's your regular HTML tag. So if you're styling roots in CSS, that means you're styling the HTML tag. With the shadow DOM, the shadow root is the basis of the shadow DOM. I've said shadow DOM so many times it doesn't sound like a real word. I'm moving on.

8. How Shadow DOM Works

Short description:

So every new instance of the shadow DOM is separate from the actual page, kind of like how you have an iframe. The video tag renders an actual video on the page, but it's not affected by the other elements on the page. Videos have their own styling, but whatever styling is encapsulated in the video does not affect any other styling on the page. And it allows you to interact with the shadow roots.

So how it works, basically, is it works like an iframe. So every new instance of the shadow DOM is separate. Maybe I shouldn't have said that word. Every new instance of the SDOM is separate from the actual page, kind of like how you have an iframe. So an example of a common SDOM elements would be the video elements in HTML. The video tag renders an actual video on the page, but it's not affected by the other elements on the page.

So if you thought about why you need to specifically start ... While videos don't get affected by global styling, it's because they are instantiated in their own shadow DOM element. And we can see the shadow DOM elements in our page by, let's see, maybe YouTube? So basically you can view the regular DOM wouldn't usually show you what shadow elements are, but you can turn it on. Trying to scroll. Anyway, you take my word for it. You can turn on the shadow roots somewhere in this panel. There's a keyboard, there's a little check button like this that allows you to show what shadow elements are. And for video tags that's how they work. They are not part of the DOM itself. They are in their own little iframe thingy. And that's why they don't get affected by global styling of elements. And shadow DOMs allow you set style and markup without affecting the global DOM, so it's the same thing with the videos. Videos have their own styling, but whatever styling is encapsulated in the video does not affect any other styling on the page. It's just trapped in that little video tag. And it allows you to interact with the shadow roots, which just sounds very cool, which is why I put it there. So let's take a look at how the shadow DOM works. This is a link. So here we have our custom elements. So this would be, we can see we have a post component here and this is what a normal post component would look like. But then what we want to do now is create a new instance of the shadow DOM. So let's scroll down a bit. All right. And then we're going to create our new class shadow.

9. Creating Shadow Components

Short description:

And then we create our shadow elements, initialize our constructors, and call attachShadow with the open mode. The open mode allows interaction with the shadow DOM. If the mode is closed, elements cannot be added to the shadow DOM. This is commonly used for embeds. The shadow root is created and an element is appended to it. The class constructor for the shadow component is defined using custom elements. Finally, we test if the shadow component works.

And then we're going to create our new class shadow. I'm going to leave the commented out code there cause I am scared of it's not working again, so I will have something to reference. So we create our shadow elements, we initialize our constructors. We initialize our constructor. And in here, this is where we call this dot attach shadow and mode open. So the mode, the open shadow mode, is what allows you actually interact with the shadow DOM. If it was closed, you wouldn't be able to add any elements to the shadow DOM. That's what people usually use for embeds.

So if you've tried to embed an iframe and you've tried to maybe style it or something and you couldn't, it's usually because the shadow DOM is closed. So by them closing the route, it means you can't interact with that element at all. So that's how this works. And then we can have this dot shadow route. So we need to create an element. Let's just create a const. Let's say shadow div equals to document dot create element div. And we can pass in random HTML to this. Dot inner HTML equals hello react advanced. Yep, and then this dot shadow root dot append child, and let's pass in the shadow div. So this is the class constructor for our shadow components. We still need to define it using custom elements so we can... Are you happy now? There you go. So we can define it using custom elements dot define. And this is going to be shadow comp, and we're going to have the shadow component class. I always forget which cases I use, but this is this one. All right. And then let's see if this works. Shadow component. Okay. Thanks. That's what I get for changing things on the fly.

10. Shadow Components and Connected Callback

Short description:

In the shadow component, it opens a new shadow root. We can also pass attributes to custom components to be rendered as data. The connected callback is like the useEffect of web components.

All right. So there we have it. But then the important thing about this one is when we go to our actual dom, you can see that in the post component, it was just part of the page. So it wasn't really separate from the dom. In the shadow component, it's opened a new shadow root. And you can see that here it says to open, and we have our div passed into here. So there's an example of how you would initialize a shadow component.

But now we have to show how the styles of the shadow components would be encapsulated from the rest of the page. So this is our, I'm going to style this the same way this one is written. All right, I'm just going to copy and paste this. All right. This will work. So something else we can do with custom components is you can also pass attributes to custom components to be rendered as data. So the same way in React, you would initialize a, let's say this was a post-component in React and we just set value to whatever value we wanted rendered. We can do the same thing in custom components using JavaScript.

So up here, we have our connected callback. That's what it's called. Connector? I don't sound right. So here we're basically going to get the attributes. And that's what we set to the component we want rendered. And when we call this component, we're just passing the attributes here. So here we're passing title custom components and data text, hello, React, Advance London. And that's what's rendered on the screen here. So we can do the same thing for our shadow components. Once you call your super. And this dot attach shadow. So we can leave all of these in our constructors and put all of this in our connected callback. The connected callback is pretty much the use effect of web components. Once your page is loaded fully, once the element renders on the page, then whatever is in connected callback is called back. So we have a shadow dev.

11. Defining Shadow DOM Styling

Short description:

Now we have our shadow dot inner HTML. We define the values for title and data text. The shadow text becomes a mirror of our post. However, the shadow DOM doesn't inherit the styling from the global DOM. To style shadow elements, we need to define their styling in custom components.

Okay, now we have our shadow dot inner HTML. And we need to define all of these. So we're going to have const title equals to this dot get attributes title. And if it doesn't exist, make that null. Same thing with const data text. This is going to be this dot get attribute data text. If it doesn't exist, make it null. And then we're going to set date to be a new instance of whatever date the component is rendered on. Date. I'll call string. Thanks. There we go.

All right, so this is what we have on the screen now. And then once we initialize the values here, title equals to shadow element and data text equals hello react advanced. All right. So we have this set up now, and then I'm just going to switch up the data text so I can have something fun. Data text split reverse. Join. So our shadow text is going to be a mirror of our post here on defined. There we go.

So our shadow text gets to be a mirror of our post, but now if we look in here, we can see that even though we have defined this inside a post class. Osh. So this is in a post class, so technically it should have all the stylings of the post elements that this one up here has. Because we can see that we have styled our post elements. Once I scroll up, we start up with the element here, but the shadow dome does not get any of that styling because the post element was styled in the global dome. And that doesn't trickle down to the shadow dome. So when you create shadow elements, if you want to style them, you also have to define the styling for the shadow elements. in your custom components, which is kind of annoying, but it's also fine. So that's what we're going to do now. We can set an attribute shadow div dot.

12. Understanding Shadow DOM

Short description:

We can define a style tag inside the shadow element, and it will only affect the shadow element. Encapsulation keeps the shadow DOM separate from the global tag. This is how the shadow part works.

Here, we can pass this into this element as well. We can create a style tag here. And this style tag can have, let's see, dot post and order, NPX, solid, right. There we go. So once you have defined your style tag inside the shadow element, it only affects the shadow element. And you can see that it did not affect the styling of the post that was in our global tag either. So that is how encapsulation works. They are both elements that are rendered on the DOM and the user can see both of them. But one is just kept separate from the other because it's the shadow DOM and the other one is the custom element. So that is how the shadow part works.

13. HTML Templates and Their Purpose

Short description:

HTML templates are tags that don't show up on the HTML page. They serve as placeholders for content to be rendered later using JavaScript in custom components.

And then we can go on to HTML templates. So HTML templates are a specific tag that don't show up on the HTML page. And I'll explain what that means. So basically, if we have this template here, this isn't going to show up on an actual page. So let's just take a look at this real quick. I'm just going to cut this out. So here we have defined our templates. So for all intents and purposes, we don't have any JavaScript on this page. But by default, the templates tag does not render on the page. If you open up your DOM, you will see the template tag in the DOM, but it's pretty much just empty. So here we do have the template tag, and we have all the elements that should be inside it, but by default the template tag does not show up on the DOM. It's just set to display none, and it's empty. All the elements are stored inside something called a document fragment. The fragment is basically just a piece of the document object model that is stored in the template tag. Template tags are basically placeholders for contents that you want to render on the page at a later time. So anything you put in a template tag can be called after the page has loaded using JavaScript in your custom components.

14. Using Template Elements in Web Components

Short description:

Template elements serve the purpose of not rendering on the DOM. Let's take a look at some JavaScript. First, we define a class web component that extends the constructor and connected callback. The template function allows us to define contents in the DOM itself and render it in the component. We get the content of a template tag using template content.

I'm going to be honest. I didn't get this. Right? Like, what's the general idea? But I guess the point is just that it's the same way you have the, you have semantic elements that serve a certain purpose, template elements serve the purpose of not rendering on the DOM. And that is just its burden in life.

So let's take a look at some JavaScript using... Yes. All right. So first we define a class web component. This is going to extend... So same thing we've been doing since we're getting our custom components set up. We have our constructor. And we have super. And then we have our connected callback.

So with the template function, when you're calling a template function, you have to target the specific template function. The difference between the template function and what we've been doing so far is that we have been defining all these contents in JavaScript so far. Like we've been calling, we've been creating divs and everything. But now we just have it in the DOM itself and we're going to render it here. And then we put it in the component.

So we have our connected call back and we're going to get const templates. That's going to be close to document.get element by ID. Okay. I'm good. ID, what was the name of this? HTML template. Yes. HTML template. Another thing with the template tag is that it doesn't work the same way regular elements work. So with regular elements, if I wanted to get their content, I would just use inner HTML. As we've seen from the thing here, components do not ‑‑ templates do not have inner HTML. What they have is a fragment, which can't be targeted just using inner HTML. So how we get the content in a HTML tag is by using template content.

15. Targeting Templates and Content in Web Components

Short description:

So we target the template and we target the content and then we create a node from this content. We can make that deep. I feel like you have to take my word for the rest of the HTML templates. HTML templates allow you to use reusable HTML elements without any installation. They are cross-framework compatible, meaning you can use them in React, Angular, Vue, or any framework. React and Web Components are built to solve different problems, so it's not a versus situation. Custom Elements Everywhere shows how custom components work with each framework.

So we target the template and we target the content and then we create a node from this content. So basically what's happening here is we can make that deep. So let's take a look at each of these things individually. I'm going to throw everything into JavaScript because that's how I work. content. And we're going to define this custom component. Define webcomponent. Webcomponent. So arguments required by only one present. That's not right. Hmm. What? Yeah, that's the thing with demos. It will take 10 minutes. And it's been 30 minutes. And you're, like, what? All right, let's wrap this up. I feel like you have to take my word for the rest of the HTML templates. But also I do have all of the code already set up on my code engine, because I'm the kind of student that did the assignments before the teacher assigned it. So, if you want to take a look at it, I have the links to those in my slides. I'm going to run through the rest of it. I'm going to get to the actual React parts. So, yeah, HTML templates, blah, blah, blah, this, that, that. Y Web components are awesome. They allow you to use reusable HTML elements. Love that. But also they do not require any installation, so you don't need to set up a build process or anything, you can just use them out the bat. My favorite part, they are cross-framework compatible meaning that you can use your web components you can define one web component use it in React, Angular, Vue, any framework, and it will work. React versus Web Components which should you be using? The React docs puts it best when it says React and Web Components are built to solve different problems. So, it's not a versus, it's not a this or that situation, it's a this and that situation. We're looking at how best we can combine Web Components with React and get it to work. So, both. Both is good. So, there is a website it's called Custom Elements Everywhere and it shows you how elements how custom components work with each framework. So, you can see that for Angular it has a score of 100%, integrates perfectly with Angular. For Vue, it has a score of 100%, integrates perfectly with Vue. For React? Could be better. Basically the problem with that is because React does not allow instant it does not allow you to interact with the DOM the way web components do. So if you are trying to pass a web component let's say we define a button in a web component and we have an onclick event that is not going to work the same way that things work in React. Because React is React.

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.