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

Side by Side Diff: appengine/config_service/ui/bower_components/webcomponentsjs/README.md

Issue 2923973003: Added base template for config ui. (Closed)
Patch Set: Created 3 years, 6 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
OLDNEW
(Empty)
1 webcomponents.js (v1 spec polyfills)
2 ================
3
4 [![Build Status](https://travis-ci.org/webcomponents/webcomponentsjs.svg?branch= master)](https://travis-ci.org/webcomponents/webcomponentsjs)
5
6 > **Note**. For polyfills that work with the older Custom Elements and Shadow DO M v0 specs, see the [v0 branch](https://github.com/webcomponents/webcomponentsjs /tree/v0).
7
8 A suite of polyfills supporting the [Web Components](http://webcomponents.org) s pecs:
9
10 - **Custom Elements v1**: allows authors to define their own custom tags ([spec] (https://w3c.github.io/webcomponents/spec/custom/), [tutorial](https://developer s.google.com/web/fundamentals/getting-started/primers/customelements)).
11 - **HTML Imports**: a way to include and reuse HTML documents via other HTML doc uments ([spec](https://w3c.github.io/webcomponents/spec/imports/), [tutorial](ht tps://www.html5rocks.com/en/tutorials/webcomponents/imports/)).
12 - **Shadow DOM v1**: provides encapsulation by hiding DOM subtrees under shadow roots ([spec](https://w3c.github.io/webcomponents/spec/shadow/), [tutorial](http s://developers.google.com/web/fundamentals/getting-started/primers/shadowdom)).
13
14 For browsers that need it, there are also some minor polyfills included:
15 - [`HTMLTemplateElement`](https://github.com/webcomponents/template)
16 - [`Promise`](https://github.com/stefanpenner/es6-promise)
17 - `Event`, `CustomEvent`, `MouseEvent` constructors and `Object.assign`, `Array. from` (see [webcomponents-platform](https://github.com/webcomponents/webcomponen ts-platform))
18
19 ## How to use
20
21 The polyfills are built (concatenated & minified) into several bundles that targ et
22 different browsers and spec readiness:
23
24 - `webcomponents-hi.js` -- HTML Imports (needed by Safari Tech Preview)
25 - `webcomponents-hi-ce.js` -- HTML Imports and Custom Elements v1 (needed by Saf ari 10)
26 - `webcomponents-hi-sd-ce.js` -- HTML Imports, Custom Elements v1 and Shady DOM/ CSS (needed by Safari 9, Firefox, Edge)
27 - `webcomponents-sd-ce.js` -- Custom Elements and Shady DOM/CSS (no HTML Imports )
28 - `webcomponents-lite.js` -- all of the polyfills: HTML Imports, Custom Elements , Shady DOM/CSS and generic platform polyfills (such as ES6 Promise, Constructab le events, etc.) (needed by Internet Explorer 11), and Template (needed by IE 11 and Edge)
29
30 If you are only targeting a specific browser, you can just use the bundle that's
31 needed by it; alternatively, if your server is capable of serving different asse ts based on user agent, you can send the polyfill bundle that's necessary for th e browser making that request.
32
33 ## `webcomponents-loader.js`
34 Alternatively, this repo also comes with `webcomponents-loader.js`, a client-sid e
35 loader that dynamically loads the minimum polyfill bundle, using feature detecti on.
36 Note that because the bundle will be loaded asynchronously, you should wait for the `WebComponentsReady` before you can safely assume that all the polyfills hav e
37 loaded and are ready to be used (i.e. if you want to dynamically load other cust om
38 elements, etc.).
39
40 Additionally, you can check if `window.WebComponents` exists to know if the `Web ComponentsReady` event will fire, and you can check if `window.WebComponents.rea dy` is true to check if the `WebComponentsReady` event has already fired.
41
42 Here's an example:
43
44 ```html
45 <!-- Load polyfills; note that "loader" will load these async -->
46 <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
47
48 <!-- Load a custom element definition via HTMLImports -->
49 <link rel="import" href="my-element.html">
50
51 <!-- Use the custom element -->
52 <my-element></my-element>
53
54 <!-- Interact with the upgraded element -->
55 <script>
56 window.addEventListener('WebComponentsReady', function() {
57 // At this point we are guaranteed that all required polyfills have loaded,
58 // all HTML imports have loaded, and all defined custom elements have upgrad ed
59 let MyElement = customElements.get('my-element');
60 let element = document.querySelector('my-element');
61 console.assert(element instanceof MyElement); // 👍
62 element.someAPI(); // 👍
63 });
64 </script>
65 ```
66
67 ## `custom-elements-es5-adapter.js`
68 According to the spec, Custom Elements must be ES6 classes (https://html.spec.wh atwg.org/multipage/scripting.html#custom-element-conformance). Since most projec ts need to support a wide range of browsers that don't necessary support ES6, it may make sense to compile your project to ES5. However, ES5-style custom elemen t classes will **not** work with native Custom Elements because ES5-style classe s cannot properly extend ES6 classes, like `HTMLElement`.
69
70 To work around this, load `custom-elements-es5-adapter.js` before declaring new Custom Elements.
71
72 **The adapter must NOT be compiled.**
73
74 ```html
75 <!-- Load Custom Elements es5 adapter -->
76 <script src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></ script>
77 <!-- Load polyfills; note that "loader" will load these async -->
78 <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
79 <!-- Load the es5 compiled custom element definition -->
80 <link rel="import" href="my-es5-element.html">
81
82 <!-- Use the custom element -->
83 <my-es5-element></my-es5-element>
84 ```
85
86 ## Browser Support
87
88 The polyfills are intended to work in the latest versions of evergreen browsers. See below
89 for our complete browser support matrix:
90
91 | Polyfill | IE11+ | Chrome* | Firefox* | Safari 9+* | Chrome Android* | Mobil e Safari* |
92 | ---------- |:-----:|:-------:|:--------:|:----------:|:---------------:|:----- ---------:|
93 | Custom Elements | ✓ | ✓ | ✓ | ✓ | ✓| ✓ |
94 | HTML Imports | ✓ | ✓ | ✓ | ✓| ✓| ✓ |
95 | Shady CSS/DOM | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
96
97 \*Indicates the current version of the browser
98
99 The polyfills may work in older browsers, however require additional polyfills ( such as classList, or other [platform](https://github.com/webcomponents/webcompo nents-platform)
100 polyfills) to be used. We cannot guarantee support for browsers outside of our c ompatibility matrix.
101
102
103 ### Manually Building
104
105 If you wish to build the bundles yourself, you'll need `node` and `npm` on your system:
106
107 * install [node.js](http://nodejs.org/) using the instructions on their website
108 * use `npm` to install [gulp.js](http://gulpjs.com/): `npm install -g gulp`
109
110 Now you are ready to build the polyfills with:
111
112 # install dependencies
113 npm install
114 bower install
115 # build
116 gulp build
117
118 The builds will be placed into the root directory.
119
120 ## Contribute
121
122 See the [contributing guide](CONTRIBUTING.md)
123
124 ## License
125
126 Everything in this repository is BSD style license unless otherwise specified.
127
128 Copyright (c) 2015 The Polymer Authors. All rights reserved.
129
130 ## Helper utilities
131
132 ### `WebComponentsReady`
133
134 Under native HTML Imports, `<script>` tags in the main document block the loadin g of such imports. This is to ensure the imports have loaded and any registered elements in them have been upgraded.
135
136 The `webcomponents-lite.js` polyfill (as well as the smaller bundles and the loa der) parse element definitions and handle their upgrade asynchronously. If prema turely fetching the element from the DOM before it has an opportunity to upgrade , you'll be working with an `HTMLUnknownElement`.
137
138 For these situations, you can use the `WebComponentsReady` event as a signal bef ore interacting with the element. The criteria for this event to fire is all Cus tom Elements with definitions registered by the time HTML Imports available at l oad time have loaded have upgraded.
139
140 ```js
141 window.addEventListener('WebComponentsReady', function(e) {
142 // imports are loaded and elements have been registered
143 console.log('Components are ready');
144 });
145 ```
146
147 ## Known Issues
148
149 * [ShadowDOM CSS is not encapsulated out of the box](#shadycss)
150 * [Custom element's constructor property is unreliable](#constructor)
151 * [Contenteditable elements do not trigger MutationObserver](#contentedit)
152 * [ShadyCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work](#nestedparens)
153
154 ### ShadowDOM CSS is not encapsulated out of the box <a id="shadycss"></a>
155 The ShadowDOM polyfill is not able to encapsulate CSS in ShadowDOM out of the bo x. You need to use specific code from the ShadyCSS library, included with the po lyfill. See [ShadyCSS instructions](https://github.com/webcomponents/shadycss).
156
157 ### Custom element's constructor property is unreliable <a id="constructor"></a>
158 See [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for back ground.
159
160 In Safari and IE, instances of Custom Elements have a `constructor` property of `HTMLUnknownElementConstructor` and `HTMLUnknownElement`, respectively. It's uns afe to rely on this property for checking element types.
161
162 It's worth noting that `customElement.__proto__.__proto__.constructor` is `HTMLE lementPrototype` and that the prototype chain isn't modified by the polyfills(on to `ElementPrototype`, etc.)
163
164 ### Contenteditable elements do not trigger MutationObserver <a id="contentedit" ></a>
165 Using the MutationObserver polyfill, it isn't possible to monitor mutations of a n element marked `contenteditable`.
166 See [the mailing list](https://groups.google.com/forum/#!msg/polymer-dev/LHdtRVX XVsA/v1sGoiTYWUkJ)
167
168 ### ShadyCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work <a id="nestedparen s"></a>
169 ShadyCSS `:host()` rules can only have (at most) 1-level of nested parentheses i n its argument selector under ShadyCSS. For example, `:host(.zot)` and `:host(.z ot:not(.bar))` both work, but `:host(.zot:not(.bar:nth-child(2)))` does not.
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698