| 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.createShadowRoot](https://api.dartlang.org/apidocs/channels/stable/#dar
t-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/webcomponents.min.js"></script> |
| 20 <script src="packages/web_components/dart_support.js"></script> |
| 21 ``` |
| 22 |
| 23 You can also use an unminified version for development: |
| 24 |
| 25 ```html |
| 26 <script src="packages/web_components/webcomponents.js"></script> |
| 27 <script src="packages/web_components/dart_support.js"></script> |
| 28 ``` |
| 29 |
| 30 Because the Shadow DOM polyfill does extensive DOM patching, webcomponents.js |
| 31 should be included **before** other script tags. Be sure to include |
| 32 dart_support.js 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 The `webcomponents.*` files in this package are developed |
| 68 [here](https://github.com/Polymer/webcomponentsjs). Follow the instructions |
| 69 there for how to build a new release and then copy the files into this package. |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1400473008:
Roll Observatory packages and add a roll script (Closed)
Base URL: git@github.com:dart-lang/observatory_pub_packages.git@master