DevBytes: Web Components – Shadow Dom


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.

Be the first to comment

Leave a Reply

Your email address will not be published.


*