Chromium Code Reviews Chromium Code Reviews
Issue 158083002:
introduce web_components pkg for consolidated polyfills (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart| OLD | NEW |
|---|---|
| (Empty) | |
| 1 # Web Components | |
| 2 | |
| 3 This package has the polyfills for | |
| 4 [Shadow DOM](http://www.polymer-project.org/platform/shadow-dom.html), | |
| 5 [Custom Elements](http://www.polymer-project.org/platform/custom-elements.html), | |
| 6 and [HTML Imports](http://www.polymer-project.org/platform/html-imports.html). | |
| 7 | |
| 8 These features exist in dart:html, for example | |
| 9 [Element.reateShadowRoot](https://api.dartlang.org/apidocs/channels/stable/#dart -dom-html.Element@id_createShadowRoot) | |
| 10 and [Document.register](https://api.dartlang.org/apidocs/channels/stable/#dart-d om-html.HtmlDocument@id_register). | |
| 11 However those APIs are not supported on all browsers yet unless you | |
| 12 load the polyfills, as indicated below. | |
| 13 | |
| 14 ## Getting started | |
| 15 | |
| 16 Include the polyfills in your HTML `<head>` to enable Shadow DOM: | |
| 17 | |
| 18 ```html | |
| 19 <script src="packages/web_components/platform.js"></script> | |
| 20 <script src="packages/web_components/dart_support.js"></script> | |
| 21 ``` | |
| 22 | |
| 23 You can also use an unminfied version for development: | |
| 24 | |
| 25 ```html | |
| 26 <script src="packages/web_components/platform.concat.js"></script> | |
| 27 <script src="packages/web_components/dart_support.js"></script> | |
| 28 ``` | |
| 29 | |
| 30 Because the Shadow DOM polyfill does extensive DOM patching, platform.js should | |
| 31 be included **before** other script tags. Be sure to include dart-shadowdom.js | |
|
Siggi Cherem (dart-lang)
2014/02/10 20:49:23
dart-shadowdom.js => dart_support.js
Jennifer Messerly
2014/02/10 22:17:11
Done.
| |
| 32 too, it is required for the Shadow DOM polyfill to work with | |
| 33 [dart2js](https://www.dartlang.org/docs/dart-up-and-running/contents/ch04-tools- dart2js.html). | |
| 34 | |
| 35 ## Custom Elements | |
| 36 | |
| 37 Custom Elements let authors define their own elements. Authors associate | |
| 38 JavaScript or Dart code with custom tag names, and then use those custom tag | |
| 39 names as they would any standard tag. | |
| 40 | |
| 41 For example, after registering a special kind of button called `super-button`, | |
| 42 use the super button just like this: | |
| 43 | |
| 44 ```html | |
| 45 <super-button></super-button> | |
| 46 ``` | |
| 47 | |
| 48 Custom elements are still elements. We can create, use, manipulate, and compose | |
| 49 them just as easily as any standard `<div>` or `<span>` today. | |
| 50 | |
| 51 See the Polymer [Custom Elements page](http://www.polymer-project.org/platform/c ustom-elements.html) | |
| 52 for more information. | |
| 53 | |
| 54 ## Shadow DOM | |
| 55 | |
| 56 Shadow DOM is designed to provide encapsulation by hiding DOM subtrees under | |
| 57 shadow roots. It provides a method of establishing and maintaining functional | |
| 58 boundaries between DOM trees and how these trees interact with each other within | |
| 59 a document, thus enabling better functional encapsulation within the DOM. | |
| 60 | |
| 61 See the Polymer [Shadow DOM page](http://www.polymer-project.org/platform/shadow -dom.html) | |
| 62 for more information. | |
| 63 | |
| 64 | |
| 65 ## Hacking on this package | |
| 66 | |
| 67 *NOTE*: Currently we use | |
| 68 [a patched version of CustomElements](https://github.com/dart-lang/CustomElement s/tree/blink_tests). | |
|
Siggi Cherem (dart-lang)
2014/02/10 20:49:23
update? (now that the pull request has been merged
Jennifer Messerly
2014/02/10 22:17:11
Update the polyfill? In our moment of triumph?! ;)
Siggi Cherem (dart-lang)
2014/02/10 22:35:36
sgtm
| |
| 69 This is to get polyfilled behavior closer to native. | |
| 70 See [this pull request](https://github.com/Polymer/CustomElements/pull/97) for | |
| 71 more information. It is not required to use these changes; platform.js from | |
| 72 https://polymer-project.org will work just as well, but it will have less error | |
| 73 checking. | |
| 74 | |
| 75 To rebuild platform.js: | |
| 76 | |
| 77 ```bash | |
| 78 # Make a directory like ~/src/polymer | |
| 79 mkdir ~/src/polymer | |
| 80 cd ~/src/polymer | |
| 81 git clone https://github.com/polymer/tools | |
| 82 | |
| 83 # Sync polymer repositories | |
| 84 ./tools/bin/pull-all-polymer.sh | |
| 85 | |
| 86 # If you don't have "npm", get it here: http://nodejs.org | |
| 87 cd platform-dev | |
| 88 npm install | |
| 89 grunt minify audit | |
| 90 cd build | |
| 91 | |
| 92 # Copy the build output to your Dart source tree | |
| 93 cp build.log platform* ~/dart/dart/pkg/web_components/lib | |
| 94 ``` | |
| OLD | NEW |
