Adobe Explains Shadow DOM And Web Components

Developer & Design

Share this Post

Building a Web site is hard unless you've spent a fair amount of time pouring over HTML, Javascript, CSS and recently, HTML5, to learn the basics. One of the major complaints levied against the complexity of building Web sites is the use of iframes to separate code from each other. Shadow DOM makes that task simpler.

According to Dmitri Glazkov, Shadow DOM "refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree."

The blog post above is still pretty confusing. Some of us, including myself, are much better learners if we're given a video walkthrough. Christian Cantrell of Adobe has come through for us visual learners by creating a video walkthrough of how to use Shadow DOM in Chrome.

If you're in the mood for trying out Shadow DOM, you can experiment with Chrome Canary. Canary is a perpetual beta version of Chrome that is on the cutting edge of new features coming to the Web. Some of the features mentioned here were talked about by Google last week when they asked us to "Meet the Web platform."

Do you find Shadow DOM to be advantageous to you as a developer? Or do you prefer coding the old-fashioned way? Let us know in the comments.