Trying out Shadow Dom

Pretty simple isn’t it?

Manoj Singh Negi
Jan 14, 2019 · 3 min read

I have been hearing about Shadow DOM for a quite long now. It’s time we should try them out. So before we get started what exactly is Shadow DOM?

What is Shadow DOM?

Let’s get back to the Shadow DOM. A Shadow DOM is a hidden dom which can be attached to any element inside our real DOM. It works like a normal DOM. We can use all of the DOM APIs with it but one of the coolest benefits of the Shadow DOM is that all of its markup and style will be scoped. So any CSS that we write inside it will not affect the real DOM. isn’t it cool?

Enough talk. Let’s try out Shadow DOM. ✋

Trying out Shadow Dom

If you run this HTML file in your browser you will see I am a shadow node paragraph written in your browser. What we did above is simple. We take ref of an element with id shadow-dom-container and then called attachShadow on it in return we get the Shadow DOM which we saved in the shadowDOM variable. In the next line we created a paragraph element and set it’s text to I am a shadow node paragraph and in the last line, we appended the element to our Shadow DOM.

Passing {mode: "open"} to attachShadow will allow us to access Shadow DOM anytime by using container.shadowRoot property.

No magic here. Everything is working as it works in real dom so what’s the fuss about? Let’s have a look at another example here

So everything else is the same but we also have a style element now in our code. So we basically created a style tag and inserted some style which will make p font color red but if you noticed we also have a normal p tag below the shadow-dom-container div which is not affected by our Shadow DOM.

If you run this HTML file in your browser you will get

If you notice the style we appended to the Shadow DOM only affected the p element inside the Shadow DOM, in other words, the style of our Shadow DOM is scoped hence not affecting the real DOM.

Did you like Shadow DOM? I mean I kind of like them. In the growing world of reusable components, it sometimes becomes necessary to scope style and markup so it doesn’t conflict with other components.

Let me know your thoughts in the comments 😄

keep sharing 😃 and clapping 👏

Here are more articles for you.

Hi, My name is Manoj Singh Negi. I am a Javascript Developer and writer follow me at Twitter or Github.

I am available to give a public talk or for a meetup hit me up at justanothermanoj@gmail.com if you want to meet me.

Really loved this article ?

Peace.

recraftrelic

A group of creative and innovative People

recraftrelic

A group of creative and innovative People

Manoj Singh Negi

Written by

I write about Javascript http://eepurl.com/co0DYj. Solving people problems using code. Javascript developer, Writer.

recraftrelic

A group of creative and innovative People