Trying out Shadow Dom

Pretty simple isn’t it?

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?

I assume you know what a DOM ( Document Object Model ) is, if you don’t you should definitely check it out. On a very high level, a DOM is a tree representation of HTML running inside the browser. The browser uses it for a lot of purpose including adding, removing nodes, changing the style of a specific component etc.

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

Creating a Shadow DOM is simple as calling attachShadow on any element and this will return our Shadow DOM and then we can do anything we want with it.

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.

So I Built my own React Native Button

Building a React component as a NPM module

Publishing a React Component as an NPM module

Speed learning javascript

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 ?

Please subscribe to my blog. You will receive articles like this one directly in your Inbox frequently.

Peace.