| OLD | NEW |
| 1 # Shadow DOM polyfill | 1 # Shadow DOM polyfill |
| 2 | 2 |
| 3 Shadow DOM is designed to provide encapsulation by hiding DOM subtrees under | 3 Shadow DOM is designed to provide encapsulation by hiding DOM subtrees under |
| 4 shadow roots. It provides a method of establishing and maintaining functional | 4 shadow roots. It provides a method of establishing and maintaining functional |
| 5 boundaries between DOM trees and how these trees interact with each other within | 5 boundaries between DOM trees and how these trees interact with each other within |
| 6 a document, thus enabling better functional encapsulation within the DOM. See | 6 a document, thus enabling better functional encapsulation within the DOM. See |
| 7 the | 7 the |
| 8 [W3C specification](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shado
w/index.html) | 8 [W3C specification](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shado
w/index.html) |
| 9 for details. | 9 for details. |
| 10 | 10 |
| 11 ## Getting started | 11 ## Getting started |
| 12 | 12 |
| 13 Include the polyfill in your HTML `<head>` to enable Shadow DOM: | 13 Include the polyfill in your HTML `<head>` to enable Shadow DOM: |
| 14 | 14 |
| 15 ```html | 15 ```html |
| 16 <script src="packages/shadow_dom/shadow_dom.debug.js"></script> | 16 <script src="packages/shadow_dom/shadow_dom.debug.js"></script> |
| 17 ``` | 17 ``` |
| 18 | 18 |
| 19 You can also use a minified version for deployment: | 19 You can also use a minified version for deployment: |
| 20 | 20 |
| 21 ```html | 21 ```html |
| 22 <script src="packages/shadow_dom/shadow_dom.min.js"></script> | 22 <script src="packages/shadow_dom/shadow_dom.min.js"></script> |
| 23 ``` | 23 ``` |
| 24 | 24 |
| 25 Because it does extensive DOM patching, it should be included **before** other | 25 Because it does extensive DOM patching, it should be included **before** other |
| 26 script tags. | 26 script tags. |
| 27 | 27 |
| 28 ## Useful Resources | 28 ## Useful resources |
| 29 | 29 |
| 30 - [What the Heck is Shadow DOM?](http://glazkov.com/2011/01/14/what-the-heck-is-
shadow-dom/) | 30 - [What the Heck is Shadow DOM?](http://glazkov.com/2011/01/14/what-the-heck-is-
shadow-dom/) |
| 31 - [Web Components Explained - Shadow DOM](https://dvcs.w3.org/hg/webcomponents/r
aw-file/57f8cfc4a7dc/explainer/index.html#shadow-dom-section) | 31 - [Web Components Explained - Shadow DOM](https://dvcs.w3.org/hg/webcomponents/r
aw-file/57f8cfc4a7dc/explainer/index.html#shadow-dom-section) |
| 32 - [HTML5Rocks - Shadow DOM 101](http://www.html5rocks.com/tutorials/webcomponent
s/shadowdom/) | 32 - [HTML5Rocks - Shadow DOM 101](http://www.html5rocks.com/tutorials/webcomponent
s/shadowdom/) |
| 33 - [HTML5Rocks - Shadow DOM 201: CSS and Styling](http://www.html5rocks.com/tutor
ials/webcomponents/shadowdom-201/) | 33 - [HTML5Rocks - Shadow DOM 201: CSS and Styling](http://www.html5rocks.com/tutor
ials/webcomponents/shadowdom-201/) |
| 34 - [HTML5Rocks - Shadow DOM 301: Advanced Concepts & DOM APIs](http://www.html5ro
cks.com/tutorials/webcomponents/shadowdom-301/) | 34 - [HTML5Rocks - Shadow DOM 301: Advanced Concepts & DOM APIs](http://www.html5ro
cks.com/tutorials/webcomponents/shadowdom-301/) |
| 35 | 35 |
| 36 ## Learn the tech | 36 ## Learn the tech |
| 37 | 37 |
| 38 ### Basic usage | 38 ### Basic usage |
| (...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 91 You can read more about how the polyfill is implemented in JavaScript here: | 91 You can read more about how the polyfill is implemented in JavaScript here: |
| 92 <https://github.com/polymer/ShadowDOM#polyfill-details>. | 92 <https://github.com/polymer/ShadowDOM#polyfill-details>. |
| 93 | 93 |
| 94 ## Getting the source code | 94 ## Getting the source code |
| 95 | 95 |
| 96 This package is built from: | 96 This package is built from: |
| 97 <https://github.com/dart-lang/ShadowDOM/tree/conditional_shadowdom> | 97 <https://github.com/dart-lang/ShadowDOM/tree/conditional_shadowdom> |
| 98 | 98 |
| 99 You'll need [node.js](http://nodejs.org) to rebuild the JS file. Use `npm instal
l` to | 99 You'll need [node.js](http://nodejs.org) to rebuild the JS file. Use `npm instal
l` to |
| 100 get dependencies and `grunt` to build. | 100 get dependencies and `grunt` to build. |
| OLD | NEW |