ELJI KITAMURA: Web components enable
you to do build great websites through the use
of reusable components.
But what does it take to build a web component?
My name is Elji, and today I'm going
to give you an overview of Shadow DOM.
Shadow DOM provides you a way to add local DOM tree inside a DOM
element with local styles and markup
that are decoupled from the rest of the web page.
It's just like the built in elements
created by the browser [? vendors ?].
Let me show you an example.
Here is a video rendered in the browser using the HTML video
tag.
As you can see, the video element not only provides
video, it also provides its controls.
Notice that we did not have to write any HTML to make those
controls up here.
They're just built into the video element itself.
If we open up the DevTools and turn on Show User Agent Shadow
DOM, we can actually look at the source for the video controls.
And you see that they're actually made of HTML.
This is an example of using the Shadow DOM.
The nice thing about Shadow DOM is that you can actually
use this feature in you own components.
At the time of this recording, Shadow DOM
has landed in Chrome and Opera.
Firefox supports it in Nightly.
But support for web components is changing weekly,
so be sure to check chromestatus.com
for up-to-date browser support table.
To detect the availability of the Shadow DOM,
check if document body createShadowRoot is available.
For unsupported browsers, you can use platform.js,
a collection of a web components polyfills
made available as part of the Polymer library.
This will automatically detect the availability of the Shadow
DOM and polyfill it if necessary.
With Shadow DOM, elements can get a new kind
of node associated with them called shadow root.
An element that has a shadow root associated with it
is called shadow host.
The shadow root can be treated as an ordinary DOM
element so you can append it [INAUDIBLE].
With Shadow DOM, all markups and CSS are scoped to the element.
This means that CSS defined inside of the shadow root
will not leak out to affect a parent document.
And it also prevents the parent document
from accidentally [? styling ?] the contents of the shadow
root.
To create the shadow root, call createShadowRoot.
Add any DOM element you wish to at that Shadow DOM too.
It will return shadow root object,
which you can then append contents to.
The resulting DOM structure will look something
like this in DevTools.
As you can see, there is a node called shadow root
underneath shadow host, followed by the appended contents.
You may wish to render children of your shadow host
inside the Shadow DOM.
This is especially useful for dynamic content.
For example, a name tag that is styled in the Shadow
DOM, but needs to pull in the user's name
from an external input.
You can do so by using the content element.
By giving content tag a select attribute with CSS selector
as a value, you can distribute host content
to wherever you want.
Note that select attributes can only
take direct children of the host element.
Because adding content in [INAUDIBLE]
isn't that efficient, you may wish
to use a more [? declarative ?] approach.
You can actually do so by combining template elements
with Shadow DOM.
In a previous episode, I explained
how to work with the template elements.
Here's an example code I used there.
I'm going to combine this with Shadow DOM.
In this template, let's add content tag
so that H1 tag inside Shadow host will be projected here.
And using JavaScript, create Shadow root,
then stamp out the template using import node.
And the result will look something like this.
So that is a very basic of the Shadow DOM.
But remember, this is only a tip of the iceberg.
There are tons of interesting things
to learn around Shadow DOM, such an styling, event handling,
and working with multiple Shadow roots.
The best place to learn more about Shadow DOM
is HTML5 Rocks.
You can start from 101, but there are also 201 and 301,
so make sure to check them all out.
Thank you for watching.
See you in the next episode.