If you closely look at the contents of a website, you will be amazed to notice that the subject matter or content of it is a result of the amalgamation of it from variety of different sources. For instance, it is fairly common for a website to include widgets from Youtube Videos, Twitter or Facebook , the content may also include the personalized web advertisement to earn revenue or evidently so, it may also contain the styles and formats which are borrowed from a third party hosted over CDN and so on.
If the websites prefers to have the script which is HTML oriented (which is fairly common in the websites existing these days), chances are also that the differences may strike up between the markup,styles or scripts served from variety of different sources.
Coming back to the topic, it appears that with the help of closures or using the module pattern, the Javascript code can be encapsulated conveniently.
The possible existing solution that seems to narrow down the colliding gap between the code that is written and code that is consumed, is huge and it operates with the help of a bulky and restrictive iFrame, which leads to another set of problems. But, Shadow DOM, possibly has the solution to such problems.
How does it work?
Shadow DOM provides an excellent solution to the existing problem. It provides the solution to overlay the normal DOM subtree with a special kind of document that holds another set of subtree of nods, which are strong enough to sustain the existing scripts and styles. Also, this method is not new to tech users. They have been using this methodology to implement the usage of native widgets like slider,date,video,audio players.
Below are some of the common options that enable the usage of Shadow DOM
- Using Chrome Dev Tools, the Shadow Dom can be easily inspected. Open Dev Tools in Chrome, click on the cog button at the bottom right of the window screen. Open the settings panel, scroll down and you will notice a checkbox for showcasing Shadow DOM.
- Shadow Host: It is the DOM element which is the host to shadow dom subtree, it is the Dom node which contains the Shadow root.
- Shadow Root: The root of the DOM subtree which contains the shadow DOM nodes is a special node which has the power to create an existing boundary between the ordinary DOM nodes and the Shadow Dom nodes.
- Shadow DOM:It allows the possibility of multiple kinds of DOM subtrees to be composed into an existing larger tree.
- Shadow Boundary: Most commonly denoted by the visuals of dotted lines, Shadow boundaries, denotes the existing separation between the DOM world and the shadow Dom world. The scripts from either side cannot attempt to cross each other’s path.
You have to enable shawdow DOM in Google Chrome via going to the settings page as shown in the image:
Now check the shawdow DOM by entering following audio tag in HTML file and run it:
<audiowidth=”300″height=”32″src=”http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg”autoplay=”autoplay”controls=”controls”> Your browser does not support the HTML5 Audio. </audio>
It will output as
And now inspect the element via Google Chrome, this will show the internal representation of this audio player which used to be hidden by default.
Now play with some code and replacing normal text with shadow DOM:
<divid=”welcomeMessage”>Welcome to My World</div>
Now add the following jQuery to overright the above text with the following shadow function –
varshadowHost = document.querySelector(“#welcomeMessage”);
varshadowRoot = shadowHost.webkitCreateShadowRoot();
shadowRoot.textContent = “Hello Shadow DOM World”;
here we are creating shadow root by using webkitCreateShadowRoot() function. It overwrites the normal text with the text in the jQuery function, so you will get output – “Hello Shadow DOM World” instead of “Welcome to my World”.
Here are some of the common uses of the DOM Shadow and its existing other applicants. While, to make a successful website, one must very well be aware of the common uses and create space for the seemingly beautiful webpage to exist which has all the high tech content and is superior in its operation with the help of successful javascripts and HTML tools.
