OLD | NEW |
(Empty) | |
| 1 webcomponents.js |
| 2 ================ |
| 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) |
| 5 |
| 6 A suite of polyfills supporting the [Web Components](http://webcomponents.org) s
pecs: |
| 7 |
| 8 **Custom Elements**: allows authors to define their own custom tags ([spec](http
s://w3c.github.io/webcomponents/spec/custom/)). |
| 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/)). |
| 11 |
| 12 **Shadow DOM**: provides encapsulation by hiding DOM subtrees under shadow roots
([spec](https://w3c.github.io/webcomponents/spec/shadow/)). |
| 13 |
| 14 This also folds in polyfills for `MutationObserver` and `WeakMap`. |
| 15 |
| 16 |
| 17 ## Releases |
| 18 |
| 19 Pre-built (concatenated & minified) versions of the polyfills are maintained in
the [tagged versions](https://github.com/webcomponents/webcomponentsjs/releases)
of this repo. There are two variants: |
| 20 |
| 21 `webcomponents.js` includes all of the polyfills. |
| 22 |
| 23 `webcomponents-lite.js` includes all polyfills except for shadow DOM. |
| 24 |
| 25 |
| 26 ## Browser Support |
| 27 |
| 28 Our polyfills are intended to work in the latest versions of evergreen browsers.
See below |
| 29 for our complete browser support matrix: |
| 30 |
| 31 | Polyfill | IE10 | IE11+ | Chrome* | Firefox* | Safari 7+* | Chrome Android*
| Mobile Safari* | |
| 32 | ---------- |:----:|:-----:|:-------:|:--------:|:----------:|:---------------:
|:--------------:| |
| 33 | Custom Elements | ~ | ✓ | ✓ | ✓ | ✓ | ✓| ✓ | |
| 34 | HTML Imports | ~ | ✓ | ✓ | ✓ | ✓| ✓| ✓ | |
| 35 | Shadow DOM | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| 36 | Templates | ✓ | ✓ | ✓ | ✓| ✓ | ✓ | ✓ | |
| 37 |
| 38 |
| 39 *Indicates the current version of the browser |
| 40 |
| 41 ~Indicates support may be flaky. If using Custom Elements or HTML Imports with S
hadow DOM, |
| 42 you will get the non-flaky Mutation Observer polyfill that Shadow DOM includes. |
| 43 |
| 44 The polyfills may work in older browsers, however require additional polyfills (
such as classList) |
| 45 to be used. We cannot guarantee support for browsers outside of our compatibilit
y matrix. |
| 46 |
| 47 |
| 48 ### Manually Building |
| 49 |
| 50 If you wish to build the polyfills yourself, you'll need `node` and `gulp` on yo
ur system: |
| 51 |
| 52 * install [node.js](http://nodejs.org/) using the instructions on their website |
| 53 * use `npm` to install [gulp.js](http://gulpjs.com/): `npm install -g gulp` |
| 54 |
| 55 Now you are ready to build the polyfills with: |
| 56 |
| 57 # install dependencies |
| 58 npm install |
| 59 # build |
| 60 gulp build |
| 61 |
| 62 The builds will be placed into the `dist/` directory. |
| 63 |
| 64 ## Contribute |
| 65 |
| 66 See the [contributing guide](CONTRIBUTING.md) |
| 67 |
| 68 ## License |
| 69 |
| 70 Everything in this repository is BSD style license unless otherwise specified. |
| 71 |
| 72 Copyright (c) 2015 The Polymer Authors. All rights reserved. |
| 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 |
| 92 |
| 93 * [Limited CSS encapsulation](#encapsulation) |
| 94 * [Element wrapping / unwrapping limitations](#wrapping) |
| 95 * [Custom element's constructor property is unreliable](#constructor) |
| 96 * [Contenteditable elements do not trigger MutationObserver](#contentedit) |
| 97 * [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) |
| 101 |
| 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> |
| 123 See [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for back
ground. |
| 124 |
| 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. |
| 126 |
| 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.) |
| 128 |
| 129 ### 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`. |
| 131 See [the mailing list](https://groups.google.com/forum/#!msg/polymer-dev/LHdtRVX
XVsA/v1sGoiTYWUkJ) |
| 132 |
| 133 ### ShadowCSS: :host-context(...):host(...) doesn't work <a id="hostcontext"></a
> |
| 134 See [#16](https://github.com/webcomponents/webcomponentsjs/issues/16) for backgr
ound. |
| 135 |
| 136 Under the shadow DOM polyfill, rules like: |
| 137 ``` |
| 138 :host-context(.foo):host(.bar) {...} |
| 139 ``` |
| 140 don't work, despite working under native Shadow DOM. The solution is to use `pol
yfill-next-selector` like: |
| 141 |
| 142 ``` |
| 143 polyfill-next-selector { content: '.foo :host.bar, :host.foo.bar'; } |
| 144 ``` |
| 145 |
| 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> |
| 153 See [#212](https://github.com/webcomponents/webcomponentsjs/issues/212) |
| 154 |
| 155 `execCommand`, and `contenteditable` aren't supported under the ShadowDOM polyfi
ll, with commands that insert or remove nodes being especially prone to failure. |
OLD | NEW |