This article is not about the negative aspects of HTML but about that other dark side of HTML that is called shadow DOM . If you are a frontend developer and you have never heard about shadow DOM then you should definitely keep reading because you are missing some cool stuff about webdevelopment.
What is DOM?
Let’s start from the beginning. DOM is an abbreviation of Document Object Model and introduced by W3C as a standard to make websites more interactive. Because of DOM it is now possible to use javascript to manipulate and change elements (objects) on your page. Before we had DOM this was just not possible. After the introduction of DOM HTML documents became more structured. Every HTML page has a root node now. For HTML documents this root node is <html>. This root node then consists of nested nodes like <head> or <body> etc. You can inspect the structure of a HTML document using a DOM inspector that almost every browser has today.
So what is shadow DOM?
OK enough about the boring stuff. You were probably already familiar what DOM is so let’s talk about shadow DOM. Shadow DOM is the ability to include nodes in a HTML document that are rendered but not included in the DOM tree. This means that such elements are displayed but can not be styled using CSS or manipulated with for example javascript because after you created them they will disappear in the shadow. So how can this be usefull you might think. Sometimes you want to hide the complexity of elements from the outside world.
Consider the slider element above. You can probably image that this element is not created from a single <div> node but consists of many nested elements. Can you also imagine that you want to hide all these nested elements in the DOM tree because it makes no sense to make them available for javascript and/or CSS. For the end-user you want to make this element appear as simple as possible with just a few customization options. By hiding it’s inner complexity you also protect you element from being destroyed by a random selector or javascript library.
So is there no way to style the slider buttons then? Depends, as developer you can allow them to be styled by associating them with a pseudo-element and then style them using a pseudo attribute. For some examples how to do this look and for more information take a look at the links below.
Good post regarding Document Object Model and It’s Shadow.Many concepts regarding DOM are getting cleared through this.
Very informative post regarding DOM. I was unaware about this.
Thanks for the post.