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

Side by Side Diff: third_party/polymer/components/webcomponentsjs/README.md

Issue 2113853002: Run bower update (Closed) Base URL: https://github.com/catapult-project/catapult@polymer10-migration
Patch Set: Created 4 years, 5 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
1 webcomponents.js 1 webcomponents.js
2 ================ 2 ================
3 3
4 [![Join the chat at https://gitter.im/webcomponents/webcomponentsjs](https://bad ges.gitter.im/Join%20Chat.svg)](https://gitter.im/webcomponents/webcomponentsjs? utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 [![Join the chat at https://gitter.im/webcomponents/webcomponentsjs](https://bad ges.gitter.im/Join%20Chat.svg)](https://gitter.im/webcomponents/webcomponentsjs? utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
5 5
6 A suite of polyfills supporting the [Web Components](http://webcomponents.org) s pecs: 6 A suite of polyfills supporting the [Web Components](http://webcomponents.org) s pecs:
7 7
8 **Custom Elements**: allows authors to define their own custom tags ([spec](http s://w3c.github.io/webcomponents/spec/custom/)). 8 **Custom Elements**: allows authors to define their own custom tags ([spec](http s://w3c.github.io/webcomponents/spec/custom/)).
9 9
10 **HTML Imports**: a way to include and reuse HTML documents via other HTML docum ents ([spec](https://w3c.github.io/webcomponents/spec/imports/)). 10 **HTML Imports**: a way to include and reuse HTML documents via other HTML docum ents ([spec](https://w3c.github.io/webcomponents/spec/imports/)).
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
64 ## Contribute 64 ## Contribute
65 65
66 See the [contributing guide](CONTRIBUTING.md) 66 See the [contributing guide](CONTRIBUTING.md)
67 67
68 ## License 68 ## License
69 69
70 Everything in this repository is BSD style license unless otherwise specified. 70 Everything in this repository is BSD style license unless otherwise specified.
71 71
72 Copyright (c) 2015 The Polymer Authors. All rights reserved. 72 Copyright (c) 2015 The Polymer Authors. All rights reserved.
73 73
74 ## Helper utilities
75
76 ### `WebComponentsReady`
77
78 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.
79
80 The webcomponents.js and webcomponents-lite.js polyfills parse element definitio ns and handle their upgrade asynchronously. If prematurely fetching the element from the DOM before it has an opportunity to upgrade, you'll be working with an `HTMLUnknownElement`.
81
82 For these situations (or when you need an approximate replacement for the Polyme r 0.5 `polymer-ready` behavior), you can use the `WebComponentsReady` event as a signal before interacting with the element. The criteria for this event to fire is all Custom Elements with definitions registered by the time HTML Imports ava ilable at load time have loaded have upgraded.
83
84 ```js
85 window.addEventListener('WebComponentsReady', function(e) {
86 // imports are loaded and elements have been registered
87 console.log('Components are ready');
88 });
89 ```
90
91 ## Known Issues 74 ## Known Issues
92 75
93 * [Limited CSS encapsulation](#encapsulation)
94 * [Element wrapping / unwrapping limitations](#wrapping)
95 * [Custom element's constructor property is unreliable](#constructor) 76 * [Custom element's constructor property is unreliable](#constructor)
96 * [Contenteditable elements do not trigger MutationObserver](#contentedit) 77 * [Contenteditable elements do not trigger MutationObserver](#contentedit)
97 * [ShadowCSS: :host-context(...):host(...) doesn't work](#hostcontext) 78 * [ShadowCSS: :host-context(...):host(...) doesn't work](#hostcontext)
98 * [ShadowCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work](#nestedparens)
99 * [HTML imports: document.currentScript doesn't work as expected](#currentscri pt)
100 * [execCommand isn't supported under Shadow DOM](#execcommand) 79 * [execCommand isn't supported under Shadow DOM](#execcommand)
101 80
102 ### Limited CSS encapsulation <a id="encapsulation"></a>
103 Under native Shadow DOM, CSS selectors cannot cross the shadow boundary. This me ans document level styles don't apply to shadow roots, and styles defined within a shadow root don't apply outside of that shadow root. [Several selectors](http ://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/) are provided to be able to deal with the shadow boundary.
104
105 The Shadow DOM polyfill can't prevent document styles from leaking into shadow r oots. It can, however, encapsulate styles within shadow roots to some extent. Th is behavior isn't automatically emulated by the Shadow DOM polyfill, but it can be achieved by manually using the included ShadowCSS shim:
106
107 ```
108 WebComponents.ShadowCSS.shimStyling( shadowRoot, scope );
109 ```
110
111 ... where `shadowRoot` is the shadow root of a DOM element, and `scope` is the n ame of the scope used to prefix the selectors. This removes all `<style>` elemen ts from the shadow root, rewrites it rules using the given scope and reinserts t he style as a document level stylesheet. Note that the `:host` and `:host-contex t` pseudo classes are also rewritten.
112
113 For a full explanation on the implementation and both the possibilities and the limitations of ShadowCSS please view the documentation in the [ShadowCSS source] (src/ShadowCSS/ShadowCSS.js).
114
115 ### Element wrapping / unwrapping limitations <a id="wrapping"></a>
116 The Shadow DOM polyfill is implemented by [wrapping](http://webcomponents.org/po lyfills/shadow-dom/#wrappers) DOM elements whenever possible. It does this by wr apping methods like `document.querySelector` to return wrapped DOM elements. Thi s has a few caveats:
117 * Not _everything_ can be wrapped. For example, elements like `document`, `wi ndow`, `document.body`, `document.fullscreenElement` and others are non-configur able and thus cannot be overridden.
118 * Wrappers don't support [live NodeLists](https://developer.mozilla.org/en-US /docs/Web/API/NodeList#A_sometimes-live_collection) like `HTMLElement.childNodes ` and `HTMLFormElement.elements`. All NodeLists are snapshotted upon read. See [ #217](https://github.com/webcomponents/webcomponentsjs/issues/217) for an explan ation.
119
120 In order to work around these limitations the polyfill provides the `ShadowDOMPo lyfill.wrap` and `ShadowDOMPolyfill.unwrap` methods to respectively wrap and unw rap DOM elements manually.
121
122 ### Custom element's constructor property is unreliable <a id="constructor"></a> 81 ### Custom element's constructor property is unreliable <a id="constructor"></a>
123 See [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for back ground. 82 See [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for back ground.
124 83
125 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. 84 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.
126 85
127 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.) 86 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.)
128 87
129 ### Contenteditable elements do not trigger MutationObserver <a id="contentedit" ></a> 88 ### Contenteditable elements do not trigger MutationObserver <a id="contentedit" ></a>
130 Using the MutationObserver polyfill, it isn't possible to monitor mutations of a n element marked `contenteditable`. 89 Using the MutationObserver polyfill, it isn't possible to monitor mutations of a n element marked `contenteditable`.
131 See [the mailing list](https://groups.google.com/forum/#!msg/polymer-dev/LHdtRVX XVsA/v1sGoiTYWUkJ) 90 See [the mailing list](https://groups.google.com/forum/#!msg/polymer-dev/LHdtRVX XVsA/v1sGoiTYWUkJ)
132 91
133 ### ShadowCSS: :host-context(...):host(...) doesn't work <a id="hostcontext"></a > 92 ### ShadowCSS: :host-context(...):host(...) doesn't work <a id="hostcontext"></a >
134 See [#16](https://github.com/webcomponents/webcomponentsjs/issues/16) for backgr ound. 93 See [#16](https://github.com/webcomponents/webcomponentsjs/issues/16) for backgr ound.
135 94
136 Under the shadow DOM polyfill, rules like: 95 Under the shadow DOM polyfill, rules like:
137 ``` 96 ```
138 :host-context(.foo):host(.bar) {...} 97 :host-context(.foo):host(.bar) {...}
139 ``` 98 ```
140 don't work, despite working under native Shadow DOM. The solution is to use `pol yfill-next-selector` like: 99 don't work, despite working under native Shadow DOM. The solution is to use `pol yfill-next-selector` like:
141 100
142 ``` 101 ```
143 polyfill-next-selector { content: '.foo :host.bar, :host.foo.bar'; } 102 polyfill-next-selector { content: '.foo :host.bar, :host.foo.bar'; }
144 ``` 103 ```
145 104
146 ### ShadowCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work <a id="nestedpare ns"></a>
147 ShadowCSS `:host()` rules can only have (at most) 1-level of nested parentheses in its argument selector under ShadowCSS. For example, `:host(.zot)` and `:host( .zot:not(.bar))` both work, but `:host(.zot:not(.bar:nth-child(2)))` does not.
148
149 ### HTML imports: document.currentScript doesn't work as expected <a id="current script"></a>
150 In native HTML Imports, document.currentScript.ownerDocument references the impo rt document itself. In the polyfill use document._currentScript.ownerDocument (n ote the underscore).
151
152 ### execCommand and contenteditable isn't supported under Shadow DOM <a id="exec command"></a> 105 ### execCommand and contenteditable isn't supported under Shadow DOM <a id="exec command"></a>
153 See [#212](https://github.com/webcomponents/webcomponentsjs/issues/212) 106 See [#212](https://github.com/webcomponents/webcomponentsjs/issues/212)
154 107
155 `execCommand`, and `contenteditable` aren't supported under the ShadowDOM polyfi ll, with commands that insert or remove nodes being especially prone to failure. 108 `execCommand`, and `contenteditable` aren't supported under the ShadowDOM polyfi ll, with commands that insert or remove nodes being especially prone to failure.
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698