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.”

 

Advertisements

One thought on “Shadow DOM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s