• Home
Name
Date
Size
#Lines
LOC

..--

.bower.jsonD03-May-2024719 3030

CustomElements.jsD03-May-202433 KiB1,0291,007

CustomElements.min.jsD03-May-202416.3 KiB111

HTMLImports.jsD03-May-202437.6 KiB1,1641,137

HTMLImports.min.jsD03-May-202419.5 KiB111

MutationObserver.jsD03-May-202412.4 KiB350336

MutationObserver.min.jsD03-May-20245.9 KiB111

README.mdD03-May-20248.8 KiB15698

ShadowDOM.jsD03-May-2024155.7 KiB4,4964,420

ShadowDOM.min.jsD03-May-202470.6 KiB133

bower.jsonD03-May-2024423 2221

build.logD03-May-20249.7 KiB507504

package.jsonD03-May-2024737 3231

webcomponents-lite.jsD03-May-202477.7 KiB2,5052,448

webcomponents-lite.min.jsD03-May-202439.6 KiB122

webcomponents.jsD03-May-2024253.8 KiB7,2097,137

webcomponents.min.jsD03-May-2024115.6 KiB144

README.md

1webcomponents.js
2================
3
4[![Build Status](https://travis-ci.org/webcomponents/webcomponentsjs.svg?branch=master)](https://travis-ci.org/webcomponents/webcomponentsjs)
5
6A suite of polyfills supporting the [Web Components](http://webcomponents.org) specs:
7
8**Custom Elements**: allows authors to define their own custom tags ([spec](https://w3c.github.io/webcomponents/spec/custom/)).
9
10**HTML Imports**: a way to include and reuse HTML documents via other HTML documents ([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
14This also folds in polyfills for `MutationObserver` and `WeakMap`.
15
16
17## Releases
18
19Pre-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
28Our polyfills are intended to work in the latest versions of evergreen browsers. See below
29for 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 Shadow DOM,
42you will get the non-flaky Mutation Observer polyfill that Shadow DOM includes.
43
44The polyfills may work in older browsers, however require additional polyfills (such as classList)
45to be used. We cannot guarantee support for browsers outside of our compatibility matrix.
46
47
48### Manually Building
49
50If you wish to build the polyfills yourself, you'll need `node` and `gulp` on your 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
55Now you are ready to build the polyfills with:
56
57    # install dependencies
58    npm install
59    # build
60    gulp build
61
62The builds will be placed into the `dist/` directory.
63
64## Contribute
65
66See the [contributing guide](CONTRIBUTING.md)
67
68## License
69
70Everything in this repository is BSD style license unless otherwise specified.
71
72Copyright (c) 2015 The Polymer Authors. All rights reserved.
73
74## Helper utilities
75
76### `WebComponentsReady`
77
78Under native HTML Imports, `<script>` tags in the main document block the loading of such imports. This is to ensure the imports have loaded and any registered elements in them have been upgraded.
79
80The webcomponents.js and webcomponents-lite.js polyfills parse element definitions 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
82For these situations (or when you need an approximate replacement for the Polymer 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 available at load time have loaded have upgraded.
83
84```js
85window.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](#currentscript)
100  * [execCommand isn't supported under Shadow DOM](#execcommand)
101
102### Limited CSS encapsulation <a id="encapsulation"></a>
103Under native Shadow DOM, CSS selectors cannot cross the shadow boundary. This means 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
105The Shadow DOM polyfill can't prevent document styles from leaking into shadow roots. It can, however, encapsulate styles within shadow roots to some extent. This behavior isn't automatically emulated by the Shadow DOM polyfill, but it can be achieved by manually using the included ShadowCSS shim:
106
107```
108WebComponents.ShadowCSS.shimStyling( shadowRoot, scope );
109```
110
111... where `shadowRoot` is the shadow root of a DOM element, and `scope` is the name of the scope used to prefix the selectors. This removes all `<style>` elements from the shadow root, rewrites it rules using the given scope and reinserts the style as a document level stylesheet. Note that the `:host` and `:host-context` pseudo classes are also rewritten.
112
113For 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>
116The Shadow DOM polyfill is implemented by [wrapping](http://webcomponents.org/polyfills/shadow-dom/#wrappers) DOM elements whenever possible. It does this by wrapping methods like `document.querySelector` to return wrapped DOM elements. This has a few caveats:
117   * Not _everything_ can be wrapped. For example, elements like `document`, `window`, `document.body`, `document.fullscreenElement` and others are non-configurable 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 explanation.
119
120In order to work around these limitations the polyfill provides the `ShadowDOMPolyfill.wrap` and `ShadowDOMPolyfill.unwrap` methods to respectively wrap and unwrap DOM elements manually.
121
122### Custom element's constructor property is unreliable <a id="constructor"></a>
123See [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for background.
124
125In Safari and IE, instances of Custom Elements have a `constructor` property of `HTMLUnknownElementConstructor` and `HTMLUnknownElement`, respectively. It's unsafe to rely on this property for checking element types.
126
127It's worth noting that `customElement.__proto__.__proto__.constructor` is `HTMLElementPrototype` and that the prototype chain isn't modified by the polyfills(onto `ElementPrototype`, etc.)
128
129### Contenteditable elements do not trigger MutationObserver <a id="contentedit"></a>
130Using the MutationObserver polyfill, it isn't possible to monitor mutations of an element marked `contenteditable`.
131See [the mailing list](https://groups.google.com/forum/#!msg/polymer-dev/LHdtRVXXVsA/v1sGoiTYWUkJ)
132
133### ShadowCSS: :host-context(...):host(...) doesn't work <a id="hostcontext"></a>
134See [#16](https://github.com/webcomponents/webcomponentsjs/issues/16) for background.
135
136Under the shadow DOM polyfill, rules like:
137```
138:host-context(.foo):host(.bar) {...}
139```
140don't work, despite working under native Shadow DOM. The solution is to use `polyfill-next-selector` like:
141
142```
143polyfill-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="nestedparens"></a>
147ShadowCSS `: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="currentscript"></a>
150In native HTML Imports, document.currentScript.ownerDocument references the import document itself. In the polyfill use document._currentScript.ownerDocument (note the underscore).
151
152### execCommand and contenteditable isn't supported under Shadow DOM <a id="execcommand"></a>
153See [#212](https://github.com/webcomponents/webcomponentsjs/issues/212)
154
155`execCommand`, and `contenteditable` aren't supported under the ShadowDOM polyfill, with commands that insert or remove nodes being especially prone to failure.
156