So let's dive into the basics about web components then, how they generally work, how we create our own
web components and for this, we will use vanilla Javascript.
This means no third-party libraries, no other packages, just Javascript as it natively runs in the browser
but first of all, let me come back to the question, what web components are? Obviously we already learned
that web components are basically our own HTML tags, like my tooltip here, which is not a tag built
into the web or were built into the browser and that these are basically HTML tags which we define in
Javascript code and which we then can use on our page. So web components are really as we use them, custom
HTML elements but they are made up of three, theoretically four, but three important parts.
The first and the core part that makes up web components, the web components specification set is the
custom HTML element specification and since we in the end built custom HTML elements,
this is the core part,
this is essentially a bunch of Javascript functionalities that allow us to define our own HTML tags
and the logic behind them,
so this is a crucial part.
Now you might wonder, okay what else could be important if we are talking about creating our own custom
HTML elements?
Well there are two other pieces which are also very important and which are used in that Javascript
logic we write behind our custom HTML element and the first additional set of functions or of features
offered in Javascript that is important related to creating custom elements is the shadow DOM specification.
The shadow DOM specification is all about giving us some features to create our own DOM tree, our own
elements behind that elements you could say that are hidden away from the main DOM and I will come back
to that in more detail later where this will become clearer, so which is in the end just allowing us
to define our own HTML tags which are then grouped together behind our custom HTML tag
and which are separated from our main, our normal DOM and this is especially helpful when we talk about
CSS styling because the shadow DOM will allow us to define CSS styles that only affect our
custom element and even if we style a h1 tag in our custom element, we would not affect other h1 tags
on the page and this will become all clearer once we actually use it and dive deeper into it,
so it's another crucial part when it comes to separating our logic from the rest of the page you could
say. The third important specification is about templates and slots and this is also something we will
use in great detail, which in the end allows us to define our own HTML structure which is hidden behind
our custom element and which allows us to add some flexible entry points, these so-called slots, that
we can then actually populate with information from outside when we use our custom element
and again, this is something which will become clearer later.
So I know that this is all very confusing right now because I'm throwing a lot of interesting words
around, a lot of specifications without explaining in detail what they do because it makes more sense
to gradually build up the knowledge and we will actually start with custom HTML elements before we
add these other features, before we add the shadow DOM and the templates.
Now I also mentioned that there are four specifications that make up the web components spec and the
last specification is about HTML imports,
the idea here was that we can actually import HTML files into HTML files, just as we can import CSS
and script files but this is actually not a continued specification because as you will learn in this
course, there is a more elegant way of importing your components and of importing the HTML inside of
your components.
So we will not need this and indeed, it's not continued, it's not added to all browsers and there are
no plans to do so.