Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1)

Side by Side Diff: pkg/web_components/README.md

Issue 158083002: introduce web_components pkg for consolidated polyfills (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 6 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(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 ```
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698