(upbeat dance music)
- [Alba] Hello, my name is Alba Rivas,
I am a developer Evangelist at Salesforce,
and these are my contact details
in case you want to contact me later.
Today we're going to see what shadow DOM is.
I am going to explain to you how to attach a shadow DOM tree
using vanilla JavaScript.
And finally, we're going to see the differences
between using a shadow DOM in vanilla Web Components
and Lightning Web Components.
Okay, so first let's try to respond this question.
What is shadow DOM?
Well, shadow DOM is a web API that allows you to attach
a hidden DOM to a DOM element of your choice.
Let's say that we have this DOM here
and that we want to attach a shadow DOM tree
to the div contents and to the span contents.
You can do that by using the shadow DOM API
and we are going to see that in a second,
but first let me explain what's going to happen
if you do that.
If you create a shadow DOM
then a shadow boundary is going to be created,
enclosing the contents of each shadow tree.
And that is going to provide encapsulation.
The CSS styles that you apply to the document
are not going to leak into the shadow boundary
and the events that you fire from the inner elements
of the shadow tree are not going to escape
the shadow boundary unless you configure them to do so.
So basically let's say that shadow DOM means encapsulation.
First let's see how to attach a shadow DOM tree
using vanilla JavaScript.
This is very simple.
What you have to do is to create or retrieve an HTML element
to which you want to attach the shadow tree.
Then we use the attachShadow method.
We have to select if the mode is open or closed,
if it's open,
we're going to be able to query the inner elements
from the outside.
If not, we won't be able to do that.
And once you do that,
your shadow tree is ready and you can start adding elements.
For example, here for learning purposes,
we're adding an h1 element using the innerHTML property.
As shadow DOM is indeed a DOM,
you will be able, if you configure it as open,
to query the elements inside it.
You do that by querying the shadowRoot property,
as we are seeing here.
Let's see this in action taking a look at a demo.
For this demo I have created an HTML page
in which we have our first element,
which is an h1 that belongs to the light DOM.
Light DOM is really the traditional DOM,
but we use the word light DOM in web components context
to differentiate it from the shadow DOM.
Then we have a script and in the script
we are basically trying to create a div element,
attaching a shadow to it, and we're adding an h1 element
in the same way I did in the slides.
Finally, we are attaching a div element
to the body of the page.
So here we can see that the first h1 was added
and the second h1 was added too.
If we take a look at the Chrome inspector,
we can see that here is clearly marked that we are using
a shadow tree, because we can see
that this uses a shadow root property.
So now let's try to do a quick test.
What we want to do is to uncomment
this CSS style property.
And we're going to save.
We are going to try to style all the h1's
that belong to the document.
But look what happened.
The first one was styled
because it belongs to the document,
but the second one belongs to the shadow DOM tree.
Remember shadow DOM equals encapsulation.
So you won't be able to leak CSS styles
into the shadow DOM tree elements.
Let's do something else.
Now we're going to uncomment this code.
Here we are trying to do document.queryselectorAll
for all the h1's that belong to the document,
we are going to print the length of the result,
and we are going to print the text content of the first
element of the result.
Now, if I refresh the page
and I go to the console output tab,
we are going to see that, just one h1 was returned.
And that that h1 is the first one, the light DOM one.
It makes sense because from the outside,
the inner elements of the shadow DOM tree
won't be accessible.
However, remember we have configured the shadow as open.
Because of that, there is a trick that we can do
to obtain the h1 elements
that belong to the shadow DOM tree.
We can do that by using the shadowRoot property
as we saw in the slides.
And we're going to refresh the page to see the result.
And yes, here, we can see that in the second case,
when we query the shadow DOM,
only the second h1 element is returned, as expected.
So now let's take a look at how vanilla Web Components
differ from Lightning Web Components,
in what regards to shadow DOM.
In vanilla Web Components,
if you want to attach a shadow DOM tree,
you have to do it this way.
You have to use the attachShadow method
in the constructor of the Web Component.
And then in a later moment, for example,
here we're using the connectedCallback.
We are going to be able to query the inner elements
using the shadowRoot property
as we saw in the demo.
In Lightning Web Components,
you don't have to worry about that
because just by extending LightningElement
we're going to do that for you.
Each Lightning Web Component
is going to have a shadow DOM tree attached,
and that is going to guarantee the encapsulation
of the components, as we saw in the demo.
One small difference with vanilla Web Components
is that instead of using the shadowRoot property,
you have to use the template property,
as you can see in this code.
Finally, I want to give you some additional notes.
First of all, bear in mind that some browsers
don't support native shadow DOM yet.
And that is a case of Edge, for example.
And because of that reason, in Lightning Web Components
on the platform we use a synthetic polyfill
instead of the native one.
Our purpose is that in the future,
the synthetic polyfill gets removed
and that you can use the native one.
Finally, you have seen in the demo clearly marked
the boundaries of the shadow DOM tree that I have created.
That doesn't appear by default.
If you want to see that you have to activate that
in the Chrome developer tools.
So, what have we seen today?
Well, first of all, you have learned
that each Lightning Web Component has a shadow DOM tree
attached by default,
and this is going to provide encapsulation.
Your CSS styles are not going to leak
into the Lightning Web Components that you create,
and your events, by default,
are not going to escape the shadow boundary.
Thank you so much and I hope that you enjoyed the video.
Thanks for watching! If you learned something, be sure to like this video.
If you want to get more content like this pushed directly to you
click subscribe and that bell to get notifications