So what are web components? Web components really are just your own custom
HTML elements, HTML elements that are not built into the browser but that are created by you as
a developer or by some other developer and you are now using them in your project
and what could be easier to dive into them than to just use such a custom web component,
so let's have a quick look. Here
I have a simple index.html file and I opened it in Visual Studio Code,
the IDE I'm using in this course, you can do this in your normal system text editor, that really does
not matter,
it's a normal HTML5 skeleton we have here,
you'll find this exact file attached to this video in case you want to start with that too
but there is nothing special about this file.
Now in that file, let's say we're creating an application where we want to show a modal so that info
box pop over overlay thing you see on many pages.
Now obviously, we can create one from scratch,
we can add a div here, add some styling to the div and then write some Javascript to conditionally show
and hide that div and also add another div that can act as a backdrop,
so this gray area behind the modal that blocks access to the rest of the page, we can write all of that
but we can also create our own web component for that or use a web component someone else created
and here I created one for you
and you also find that attached to this video.
There you will find this modal.js file which you can just download and drag and drop into the same
folder as the HTML file you created or you downloaded.
Now you can go through this file, in the end,
here we create or I created a so-called web component, a custom HTML element and we will do this together
in this course,
this is taken directly from the course, we will build this component later in the course.
So I won't go through that right now,
there is a lot of stuff in there we don't know yet
and this video is not about understanding all of that,
this video is about seeing what custom elements do or what such custom web components do.
This web component in the modal here is in the end registered as a custom element with the uc-modal
tag,
that is what I can tell you right now about this code.
This creates a new HTML tag that we can use in any file that imports this modal.js file,
so let's do that.
Let's add a script import, here in the head section so that it gets loaded early and let's point at
that modal.js file and for that, it needs to be in the same folder
as I just mentioned. Now with that imported, we can use the uc-modal element as if it were a normal
HTML element
and of course this is not a built-in element, normally using this tag would do absolutely nothing because
the browser doesn't recognize that
but it now does as my Javascript file, it registers a custom element under this tag.
Now this modal happens to work in a way where we need to pass in some information between the opening
and closing tag,
for example a h1 tag, the modal title where we set the title of the modal and there we use a feature
called slots which you'll learn in detail throughout the course which tells that web component where to
position that content inside of the component.
So here I can say slot equals title because this is one of the reserved slots I have in this component
and now we also need some content that is shown below the title and there I'll add a paragraph,
this is our first web component. With this added, if we now double click this index.html file, you
will not see anything because the modal isn't opened right now.
You can open it by adding a special attribute to this uc-modal tag and that's all logic we added or
we will add in this modal.js file, so that is why this will work,
you can add the opened attribute,
make sure to spell it right. After you did this,
if you reload,
hey here is a modal and you can even close that by clicking one of the buttons or clicking the backdrop
and you see we have a nice animation there too
and this again is all stuff we will build throughout this course.
Now of course, we can also open this programmatically if we wanted to.
So instead of hardcoding opened in there, we could add other scripts, so another Javascript code which is
not related to the web component which could be our normal application code for this web app we're creating
and there the cool thing is we can interact with our own custom elements, just as with native HTML
elements.
So here I'm getting access to my modal and I'll store that in a constant named modal, by the way I
will have a Javascript refresher where I explain what const is in case you don't know that
and now I can use the normal DOM operations like document query selector to get access to an element
with a CSS selector
and here I will use uc-modal, my own tag as a selector. And with that, let's say we add a timeout here
and after three seconds, I want to open the modal. For that, I'll add an anonymous function here, an arrow
function in this case and there I can access my modal and call an open method and this open method also
exists because I added the logic for this method in this web component and we will do this together
later in the course.
So now with that, if we reload, there is nothing there but after three seconds, you will see that modal
opening and you can still close it with the buttons and so on.
So this is how a web component works and what a web component is, it is your own HTML element
which you can configure in the way you want. Behind the scenes,
such a web component also just uses native elements like divs or a header as you can see and we will
learn all of that step-by-step in the course but we can group that together, add additional logic like
here
the open method, the opened attribute and so on, add special styling and add for example an animation and
hide that all under an HTML tag that we can dump into any project which imports this web component.
That is what web components are in a nutshell and that is what makes them awesome
but now let's have a closer look at what makes up the web components specification and why we might
want to use them.