Web Components (Part 3) – Shadow DOM (Part 1)

shadow dom web components
Tue Aug 19 2014

Shedding Light on the Shadow DOM

The hardest to grasp but probably the most exciting part of the Web Component realm is the Shadow DOM.

dom

Let us take an example of a DOM. Visiting dotnetweekly.com we can see some testimonial blocks. Check out the following image, we can see some blocks in the middle of the page that are testimonial blocks

dot

<ul class="blocks">
		<li class="block first">
			<img src="/wp-content/themes/dotnetweekly/images/testimonials/isavella.jpg">
			<div class="t_txt">DotNetWeekly has become our weekly fix. No fluff, condensed, always fresh and up2date content!</div>
			<div class="name">Isavella Benekou</div>
			<div class="strap">Technical Audiences Marketing Manager, Microsoft Greece<br>
			<a target="_blank" href="http://blogs.msdn.com/b/devhellas/">blog</a>
			</div>
		</li>
		<li class="block">
			<img src="/wp-content/themes/dotnetweekly/images/testimonials/dimitris.jpg">
			<div class="t_txt">Looking forward to DotNetWeekly every week. Lots of information, carefully selected articles, to the point. Highly recommended.</div>
			<div class="name">Dimitris Gkanatsios</div>
			<div class="strap">Windows Phone  Technical Evangelist, Microsoft Greece<br>
			<a target="_blank" href="http://studentguru.gr/b/dt008/default.aspx">blog</a> ,<a target="_blank" href="https://twitter.com/dgkanatsios">twitter</a></div>
		</li>
		<li class="block">
			<img src="/wp-content/themes/dotnetweekly/images/testimonials/nikos.jpg">
			<div class="t_txt">As a .NET developer I always want to be on the edge of technology. DotNetWeekly helps me to be on top of things and never miss something juicy!</div>
			<div class="name">Nikolaos Printezis</div>
			<div class="strap">.NET developer, M.Sc at Advanced Computing Systems<br>
				<a target="_blank" href="http://studentguru.gr/members/solidus/blogs/default.aspx">blog</a></div>
		</li>
		<li class="block last">
			<img src="/wp-content/themes/dotnetweekly/images/testimonials/giwrgos.jpg">
			<div class="t_txt">DotNetWeekly provides me with important information from the .NET World each week. It's something you must have in your mailbox.</div>
			<div class="name">Giorgos Manoltzas</div>
			<div class="strap">Microsoft Student Partner<br>
				<a target="_blank" href="http://studentguru.gr/members/giorgos_5f00_man/blogs/default.aspx">blog</a></div>
		</li>
	</ul>

So the code behind these blocks is the one above.

The browser takes each element and creates an element tree. It is not difficult to imagine that for a browser the above code will be transformed into the following tree:

domTree

 

 

Now having these in mind let us checkout the HTML5 video element. If we visit this link http://www.quirksmode.org/html5/tests/video.html and see the source of an element we can checkout the video element tag.

video_element

 

However, haven’t you wondered how does this tag apply all of the functionality on this element? For example the play, progress or other elements, where do these exist?

video_element

We’ll open the settings panel in Chrome and select “Show user agent shadow DOM”. After we do this we can reveal the Shadow DOM with all of the encapsulated elements, tada!

video_element

So the video element has a shadow tree that is hidden from us! This shadow tree is encapsulated and neatly separated from the rest of the DOM.

shadowTree

 

In the next blog post we’ll see more on how we can create a shadow tree in our own element. We’ll also check out how can we query and style the shadow tree from the main document tree and vice versa. Lastly, we’ll check out some more tricks that the shadow DOM holds like the <content> element and more.

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!