Shadow DOM

Look for ‘Shadow DOM’ in Unit 2 Notes from Yakov Fain online Angular training, spring 2016


Chrome 25 supports ShadowDOM natively. Chrome 26 supports <template>. A Shadow DOM polyfill is used for browsers that do not support it natively.


Nice explanation here: What the Heck is Shadow DOM? by Dimitri Glazkov, 2014


From Mozilla Developer Network

Shadow DOM provides encapsulation for the JavaScript, CSS, and templating in a Web Component. Shadow DOM makes it so these things remain separate from the DOM of the main document. You can also use Shadow DOM by itself, outside of a web component.

Why would you want to keep some code separate from the rest of the page? One reason is that on a large site, for example, if the CSS is not carefully organized, the styling for the navigation can “leak” into the main content area where it was not intended to go, or vice-versa. As a site or an app scales, this kind of thing becomes difficult to avoid.”