(upbeat music)
- Hello, my name is Alba Rivas.
And in this quick take,
I'm going to talk about
two web standards
in which Lightning Web Components are based.
These are Custom Elements and HTML Templates.
Let's start talking about the Custom Elements specification.
With this specification
you will be able to create custom HTML elements
that you can use in your HTML pages
as if they were a standard HTML elements.
In Vanilla JavaScript,
this is the way in which you create Custom Elements.
First, you need to define a class,
and the class needs to extend HTMLElement.
Classes are part of ECMAScript 6,
and they allowed you to define the behavior
for the Custom Element.
In this example,
we want to create a flag-icon Custom Element.
And in the constructor,
we will be able to define things as the Element attributes,
or for example,
methods that define the behavior of the Custom Element.
Then, we will have to call the window customElements.define
function.
You will need to pass in a name for the Custom Element,
and also match it with the class that defines its behavior.
Now let's take a look
at how the Custom Elements web API
is used when creating Vanilla Web Components.
Normally a component that represents a UI element
is going to be a Custom Element itself,
and it is going to be defined, via a class.
In the class, we're going to implement its behavior.
Here for example,
what we're doing is to first attach a shadow tree.
If you don't know what Shadow DOM is
you can take a look at another quick take
that I published
in the Salesforce Developers YouTube channel,
which is called, "Explaining the Shadow DOM."
And what we do is, after attaching this shadow tree,
we start creating the markup for that Custom Element.
Finally, we attach the markup dynamically
to the Custom Element, to its shadow tree,
and notice here
that we have to define the Custom Element itself.
What we do
is to say that the Custom Element
is going to be called flag-icon,
and we bind it to the FlagIcon class.
So, how do you do this in Lightning Web Components?
Well, super easy.
Because the framework is going to automatically
define a Custom Element
for each Lightning Web Component,
that is defined via a class
that extends LightningElement.
LightningElement is no more
than an extension of the HTMLElement standard class.
As you can see,
we can forget both about attaching the shadow tree,
and also about defining the Custom Element.
Because Lightning Web Components
is going to do that for us.
This is what we call syntactic sugar.
Well, we have seen that this is easy to do,
but creating that HTML content dynamically is a bit weird
and probably can be improved, right?
That is exactly where the HTML Templates specification
is going to help us.
This specification defines
how to create reusable pieces of markup
that we can insert into a specific section
of the document on runtime.
What you have to do,
is to define the template using HTML,
and then you can retrieve it,
clone it and insert it in whatever node you prefer.
Now, how do you use HTML Templates
in Vanilla Web Components?
Well, if we follow with the example that we did before,
what we can do is,
instead of creating the HTML content dynamically
in the constructor,
we can create a reusable HTML Template.
Then what we will have to do
is to retrieve the template, clone it and append it
to the shadowRoot.
Very easy again.
I have highlighted here in yellow,
the lines that are specifically related
to the HTML Templates specification.
So, how we do that in Lightning Web Components?
Super easy again.
Because what we will do is to create a template.
In this case, we don't have to assign an ID to the template,
because the name of the file is going to determine
to which component it belongs to.
And then in the Lightning Web Component,
we won't have to do absolutely anything,
because the Lightning Web Component Framework
is going to automatically insert the template
into the shadow tree of each Lightning Web Component.
This means that all the boilerplate code
that you need in Vanilla Web Components
is not needed at all
when you create Lightning Web Components.
Now I'm going to show you a bit more complex example,
so that you get an idea
of how web components look like in real life.
What I have done
is to create a custom component called custom-logo.
And I have created three different implementations.
In the first implementation,
I have used Vanilla Web Components,
and I want to use an HTML Template.
So basically what I do
is to create the class
that defines the behavior of the component.
The class needs to extend HTMLElement.
Then I attach a shadow tree,
and then I create some arbitrary HTML content dynamically.
Finally, I attach that content to the shadowRoot.
And notice here
that we are defining the Custom Element
for the web component, because this is needed.
If we take a look at the HTML page
in which this Web Component is placed,
you can see here
that I have been able to create a custom logo,
by using a Vanilla Web Component
that I can configure using attributes.
Let's take a look at the second implementation.
In the second implementation,
we are going to use Vanilla Web Components,
but we're going to use an HTML Template.
This is the template.
What do we do is to retrieve the template
clone it, and then attach it to the shadowRoot.
The third implementation
is the Lightning Web Component implementation.
In this case, we have a template
which is defining the HTML file of the component.
Here you can see that I'm referencing some properties
that are part of the JavaScript file,
but I will leave the explanation of that
for another quick take.
And what is important here
is that you don't see any code
that creates a shadow tree.
You don't see any code
that creates a Custom Element,
and you don't see any code that attaches the HTML Template.
Everything is done automatically for you
by the Lightning Web Component Framework.
If we take a look at how these
two last implementations look like in HTML,
we can see that this is the second implementation,
the one that uses Vanilla Web Components and a template.
And the third one
is the Lightning Web Component implementation.
And you can see that all of them are the same,
with the difference that for the Lightning Web Component
we didn't have to create all that boilerplate code.
Summarizing, we have seen in this quick take
how each Lightning Web Component
that is defined via a class that extends LightningElement
is going to be a Custom Element,
and it's going to use an HTML Template,
because the Lightning Web Component Framework
is going to create all that boilerplate code
for you behind the scenes,
and you won't have to take care of that.
With that, I want to thank you for watching the video.
If you enjoyed it,
please give it a like,
and make sure to subscribe
to the Salesforce Developers YouTube channel,
because we will continue publishing
more videos like this one.
Bye bye.