🎞️ Videos → Develop modern HTML components with Web Components

Introduction and Greetings0:00

And hello. Say hello สวัสดี to everyone here. I was hoping that it would be empty like 10 minutes ago. So, why people start coming up? If I were to talk too fast, or you cannot understand me in any way, please raise your hand. I have a knack of speaking too fast. And I will try to slow down as much as possible. So, please don't hesitate to stop me. Just say "please slow down a bit."

Modern JavaScript Development and Web Components0:40

So, we are starting now.

I'm not really sure if people still develop in JavaScript

without React, without Vue, without Angular. I do myself. I don't do React. I don't do Angular at all.

When I was in my working environment, it stunned me that no one knew when I wrote it like that. They just ask "what is this API called?" I would say that it is mostly a website. It actually works in all the recent browsers.

Overview of Web Components: HTML, Custom Elements, and Core Tech1:40

So, let's start with an overview. We only have about 20 minutes here, 25 plus Q&A. So, we have to be somewhat fast. The overview of what I'm going to talk about is the HTML component and the web component, and the core technology of what we call web component.

HTML Components: A Brief History2:07

The HTML component, as we know it, is the tag.

Such as a p tag, a tag, header tag, HTML tag. That is the HTML component.

It began about 10 years ago, when they were working on letting normal people, other developers, non-core developers of the HTML standard, make their own tags. They can customize their own tag. We came to the project that initiated back then, I think from Google or someone around that time. Because the first time I heard about component is from AngularJS. So, I think it's probably Google in the project Polymer.

After that, web component evolved over time. In this year, 2024, if you found some Stack Overflow from 2020 or 2021, please ignore it.

Because it's probably obsolete anyway. Web component has come really a long way in these 10 years. The API I'm about to show here is the latest API. So, let's get started with it.

Core Technologies: Custom Elements, Shadow DOM, and Templates/Slots3:38

In the core technology of web component, it actually divides into three: custom element, shadow DOM, and template and slot. Don't ask me why the third has two. It's actually just three.

Custom Elements and Extending Existing Elements4:02

So, the custom element. I'm thinking that most people here develop JavaScript already. We probably have something similar in React and Vue already.

These three methods, if you go into some GitHub for the

web component, you see it all the time at the beginning of the class. Just get used to it. You don't really need to understand it. Just know that it will be there.

The second topic is it actually can extend the existing element as well. We will go into the code and see.

Custom Element Examples and OOP in JavaScript5:03

Example one. This is a basic custom element. This API, as I was saying before, if you go to Stack

Overflow, it may have different API tools. But here in native JavaScript, we actually honor OOP over

higher order functions. My friends in the React community, most of the time, we don't use class here. Sorry, I use it.

If we think about this class and extend 𝙷𝚃𝙼𝙻𝙴𝚕𝚎𝚖𝚎𝚗𝚝, this is a progress of web component in recent years. I'm not sure how recent, maybe five or six years ago.

So, every tag can be extended using defined class and extending the existing element. 𝙷𝚃𝙼𝙻𝙴𝚕𝚎𝚖𝚎𝚗𝚝 here is the default element of all HTML. So that's why it's kind of an element to display the "Hello world" text. And the usages in the actual HTML file, we call this element like how we define here. So the usages here will have some bad compatibility with some framework, namely React. So, yes.

We'll have to go into detail later here.

Interactive Custom Element Example and Framework Compatibility7:11

In example two, in the second example here, I try to be a bit more interactive,

like in actual website, the component here. So the usages in the HTML, we would just specify like this. And all the method, all the function go into the class. This class is just JavaScript. So if you imagine, we can actually have the import statement before this defining class and just use the import method into the class. It's actually possible without any frameworks.

Extending Existing HTML Elements: Clickable Paragraph Example8:08

In the third example here, I try to add a bit more that when I say

we can extend the existing element, let's see this extend HTML paragraph elements. This is actually P, the P tag in the usages.

And we use the API is this P is actually the clickable P that was defined with my-

Sorry. Typo. This has to be this class 𝙲𝚕𝚒𝚌𝚔𝚊𝚋𝚕𝚎𝙿𝚊𝚛𝚊𝚐𝚛𝚊𝚙𝚑. My sincere apologies. So if we follow the example, it's kind of when we try to create another P element,

maybe that paragraph will have a lazy load, maybe that paragraph will have some method to deal with a lot of text. And we think that maybe we need another class a bit different from that paragraph. We use OOP here to extend.

And all the method will go to the new class as well as inheritance in OOP. I'm sorry if anyone doesn't actually understand.

Please raise your hand. I can have a quick layman term about some terms

that I use. But no more than layman term. Okay. So right now, we are starting to see that we can actually see the style, set the style in here. And add event listener in here. It's actually quite laughable that most of my friends don't recognize this as event listener. They kind of ask, "What is this?" It's been there forever as long as I'm making JavaScript.

Complex Custom Element Example: Modal Component10:31

So another in the next example is actually-

Also, you are still following, right? Not speaking too fast. We have example three and five. This is intentional anyway, so that I keep you on a loop. So if I show you this, the usages of this P,

how can I make this disappear so that this don't- Okay. So can you imagine what kind of JavaScript do I need to make this possible?

Well, this is the kind of thing that you can just pass it on to ChatGPT or something, but well, don't expect it to correct you, but maybe it can guide you some way.

So I just try to use the custom modal.

And I want to set that if I click this, it will open that modal. And this modal, well, it's a modal, right? It has to be hidden at first. So it needs some style.

I think it's too small. Sorry. I will share the slide later. So this is beginning to kind of disturbing.

It's kind of complex.

If the complexity is beginning to assume as, let's say in here, we try to add style in the shadow DOMs. Since we will cover later, and this is the connect callback. And this is the open and close method here. It's actually just custom function in JavaScript. You can just write. Just like when we do with jQuery.

People still use jQuery, right? Well, I don't anymore, but maybe.

So, in here, I actually intentionally introduce you to

this API called 𝚜𝚑𝚊𝚍𝚘𝚠𝚁𝚘𝚘𝚝. Because I was about to talking about the shadow DOM.

Shadow DOM: Encapsulation and Isolation13:07

This is the second in the core technology of web component, is the shadow DOM. I think shadow DOM is come out as soon as custom element. It was used first, as my knowledge, in AngularJS.

It's a way that we encapsulate the DOM inside that component,

just that component, without contact, connected to the outside. So in the DOM, without shadow,

when we render the HTML, it kind of a tree from head of the HTML tag to header to body.

This shadow DOM can be called a sub-tree of that tree. And back then, it actually not display in the inspect element.

So this kind of thing, it isolates style and markup from the main document. It's good if you don't want your style to make up, but it's somehow a bit hard to,

when you have a brand guideline that all text must be green, and well, you have to specify green color in that as well because it is harder to access global CSS. It's not impossible, but normally, we don't do it.

Shadow DOM Example and Declarative Shadow DOM14:46

So in here, just be a bit less complex than earlier. The basic of a shadow DOM here is just declare this 𝚜𝚑𝚊𝚍𝚘𝚠𝚁𝚘𝚘𝚝. And it will be inside, when we render into the actual browser, when we inspect element,

this shadow element will have this style and this p inside already. This type of shadow DOM is most basic and it has some usage

that if you don't, it need a script. It cannot run without,

it will have a bad compatibility without JavaScript. So we are here. This is a new one. Maybe not new anymore. I think it was declared around 2021 or something at that time. But at the time, it was only Google Chrome Canary that support this declarative shadow DOM. I intentionally left out the explanation and just show the code here. And this is the same code as this basic shadow DOM.

This basic shadow DOM, but when we use this with the declarative shadow DOM here, it's become like this. Much simpler. This actually open to a new possibility of the shadow DOM to be filled in with server side. Because before this, in the basic syntax, it need to be in the script. Without JavaScript running, well, there's no style, there's no p tag. And with it, we can actually have good backward

compatibility. Some platform like WordPress that still not use React or web component at all can still use the shadow DOM with this declarative shadow DOM.

Shadow DOM Pros and Cons17:23

You may find that there is also a term of declarative shadow root, but you'll see if you search about it.

So the shadow DOM pro and con here, again, I intentionally not specify if it's a pro and a con because it's a trade-off.

It isolates style and it's reusable.

But the developers must learn how to manage this and how to manage lifecycle. Again, you have React to learn, you have to learn this as well. It's not as simple that when you have React in your code and you just drop in and it just works. No, it's not like that. It requires some work, but it is not hard, for me anyway.

So also, it's not just when we share style with the global. It's just if we have two components, two buttons, and we just want to have the same border radius, we actually need to specify it two times because it isolates. This kind of concept may be in modern frameworks like Angular or Vue, maybe they have this already. But if you're not, well, you have to learn it the hard way.

Templates and Slots: Building Reusable Components19:09

So this is what I want to show you that from this here, it's a shadow element. So what if I want to here the card component?

This is a custom card that we have title and we have content. And we have the tag h2 and tag p with a slot title

and slot content here. So if you are not familiar with this, please try to think ahead and what I try to do here.

So this custom card can actually be something

like this.

So, it's the same structure that we kind of call shadow root inside. We specify style inside. And we call this that the innerHTML will be this. And this card at card, and the slot name to this slot

is at this slot.

Can you imagine that if I were to render this one,

what kind of title that we will have in the card?

So, it's at the slot, we will have this card title and this card content goes here. This one in the default.

Okay.

Templates: Defining Reusable HTML for Later Use20:59

So, we now going to the third templates and slot. Well, template first anyway. Template is the way to define HTML so that for later use. Just like if we have we want that page to have at least

three button. But with the declarative, even with declarative shadow root, we don't want to just declare it three time. We define a template and reuse it.

This is kind of I don't actually use template myself. Because for me, I just extend the class. I don't use templates. I define a base class and I extend it and use it.

This template API is not connected to custom element. It the other API that was used. When you see this template, template here is hidden and one appear by default. And if you recall that declarative shadow DOM, it use the same API here, template with label shadow root open.

Here, use the same API. It the way web component evolve over time.

This kind of API, even for me, I don't want to use it. But for the sake of completion, I include it anyway.

Template Pros and Cons and Slot Explanation22:46

Template has a pro and con. Well, it's reusable, but I don't really need that reusable because I can just extend the class and just reuse it anyway.

So, slot here, well, I intentionally left out because I show you already what is slot. It's just a way that we define the slot that the content will go in. And in here, if you see, I call slot name, but in here,

I call it using h2 tag.

Because you actually can change the tag. This can be anything. If I want this custom card and I want this title, but I want to display a list of it, I can just say this will be ul tag with slot name content.

Okay.

Advantages of Web Components and Framework Compatibility23:54

The advantage of using web component, I really then can define more. So, let just say that it's encapsulation, something that vanilla JS don't have before. It reusability across frameworks. Right now, the framework that support I think only React 18 is the only one left without full support to web component. But React 19, as in React beta, has full support of web component already. So, you are in good hand. And another thing is it can fit into more project structure. So, yep.

Next Steps and Exploring Web Component Integration24:37

And where to go next from here? If anyone want to have a real code and see that if it

fit with my framework, if it fit with my Vue, fit with my Angular, please go to custom-element-everywhere. Search with GitHub and go into the library directory. They have the test suite for all the frameworks. Okay. I think we are closing already.

Q&A: Converting React Applications, Build Times, Practical Examples, and State Management25:13

If I speak too fast, do you have any questions?

Any people, any ideas? No hand. I just stun the whole room.

You can speak Thai. I will try to translate.

You can ask in Thai as well. Do you have any questions? Like, oh, can we like convert It's going to be a good idea to convert the whole all our like React applications to be the web component? Something like that. Well, I can answer that already. No, not a good idea.

I will answer in Thai first.

He asks that can we lessen the build time with web component just like in many big React project. It has so long build time. Like it has at least 15 minutes to build. In web component, it just work in the browser. You can just import it. It's a script tag. Take type JavaScript and yep, it just work. No need to build.

Awesome. Awesome. That's a good one. Okay. Do you have any question like the other people? Any question? Yes.

Okay. I will answer in Thai first.

I will now answer in English. So he asks us in the practical example of web component

what kind of component that I use. So the most basic one is the lazy image. The lazy image like when we try to have image tag

and somehow that image tag the URL is not working or the internet is too slow. We want to custom that behavior so that if somehow is too slow, it display loading or if it's just not working at all, we display a default image. And we can just extend it like class lazy image with extend HTML image element.

Yep. Okay. Thank you so much. Okay. Last question.

I will now explain in English. So he ask about if we can manage state of the frontend using this web component. I tell that for me the most basic form in state management is to use the attribute in HTML tag.

So in example, I use this label is name click me and somehow when if we just click already, I want to just change it to already click. Don't click anymore. Something like that. So we add it using this attribute change callback and call with if someone click already When we click, we change the label and when label change, it will call this attribute change callback in the way to manage state through the HTML attributes. Okay. So that's it. Okay. Thank you so much. So we are running out of time. Thank you so much ครับคุณวิทวัส So please give him a big applause. Yep. Actually Thank you for having me. Yes. Thank you so much.