You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Sep 20, 2019. It is now read-only.
Copy file name to clipboardExpand all lines: .travis.yml
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -3,18 +3,18 @@ sudo: required
3
3
dist: trusty
4
4
node_js: stable
5
5
addons:
6
-
sauce_connect: true
7
-
firefox: 48.0
6
+
firefox: latest
8
7
apt:
9
8
sources:
10
9
- google-chrome
11
10
packages:
12
11
- google-chrome-stable
13
-
before_script:
14
-
- export PATH=$PWD/node_modules/.bin:$PATH
15
12
script:
16
-
- xvfb-run wct
17
-
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi
13
+
- npm install -g bower
14
+
- bower install
15
+
- xvfb-run wct -l chrome
16
+
- xvfb-run wct -l firefox
17
+
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'windows 10/microsoftedge@14' -s 'windows 8.1/internet explorer@11' -s 'os x 10.11/safari@10' -s 'os x 10.11/safari@9'; fi
> **Note**. For polyfills that work with Custom Elements and Shadow DOM v1, see the [v1 branch](https://github.com/webcomponents/webcomponentsjs/tree/v1).
6
+
> **Note**. For polyfills that work with the older Custom Elements and Shadow DOM v0 specs, see the [master branch](https://github.com/webcomponents/webcomponentsjs/).
7
7
8
8
A suite of polyfills supporting the [Web Components](http://webcomponents.org) specs:
9
9
10
-
**Custom Elements v0**: allows authors to define their own custom tags ([spec](https://w3c.github.io/webcomponents/spec/custom/)).
10
+
-**Custom Elements v1**: allows authors to define their own custom tags ([spec](https://w3c.github.io/webcomponents/spec/custom/), [tutorial](https://developers.google.com/web/fundamentals/getting-started/primers/customelements)).
11
+
-**HTML Imports**: a way to include and reuse HTML documents via other HTML documents ([spec](https://w3c.github.io/webcomponents/spec/imports/), [tutorial](https://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](https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom)).
11
13
12
-
**HTML Imports**: a way to include and reuse HTML documents via other HTML documents ([spec](https://w3c.github.io/webcomponents/spec/imports/)).
14
+
For browsers that need it, there are also some minor polyfills included:
-`Event`, `CustomEvent`, `MouseEvent` constructors and `Object.assign`, `Array.from` (see [webcomponents-platform](https://github.com/webcomponents/webcomponents-platform))
13
18
14
-
**Shadow DOM v0**: provides encapsulation by hiding DOM subtrees under shadow roots ([spec](https://w3c.github.io/webcomponents/spec/shadow/)).
19
+
## How to use
15
20
16
-
This also folds in polyfills for `MutationObserver` and `WeakMap`.
21
+
The polyfills are built (concatenated & minified) into several bundles that target
22
+
different browsers and spec readiness:
17
23
18
-
## Releases
24
+
-`webcomponents-hi.js` -- HTML Imports (needed by Safari Tech Preview)
25
+
-`webcomponents-hi-ce.js` -- HTML Imports and Custom Elements v1 (needed by Safari 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, Constructable events, etc.) (needed by Internet Explorer 11), and Template (needed by IE 11 and Edge)
19
29
20
-
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:
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 assets based on user agent, you can send the polyfill bundle that's necessary for the browser making that request.
21
32
22
-
`webcomponents.js` includes all of the polyfills.
33
+
## `webcomponents-loader.js`
23
34
24
-
`webcomponents-lite.js` includes all polyfills except for shadow DOM.
35
+
Alternatively, this repo also comes with `webcomponents-loader.js`, a client-side
36
+
loader that dynamically loads the minimum polyfill bundle, using feature detection.
37
+
Note that because the bundle will be loaded asynchronously, you should wait for the `WebComponentsReady` before you can safely assume that all the polyfills have
38
+
loaded and are ready to be used (i.e. if you want to dynamically load other custom
39
+
elements, etc.). Here's an example:
25
40
41
+
```
42
+
<!-- Load polyfills; note that "loader" will load these async -->
~Indicates support may be flaky. If using Custom Elements or HTML Imports with Shadow DOM,
43
-
you will get the non-flaky Mutation Observer polyfill that Shadow DOM includes.
44
-
45
-
The polyfills may work in older browsers, however require additional polyfills (such as classList)
46
-
to be used. We cannot guarantee support for browsers outside of our compatibility matrix.
77
+
The polyfills may work in older browsers, however require additional polyfills (such as classList, or other [platform](https://github.com/webcomponents/webcomponents-platform)
78
+
polyfills) to be used. We cannot guarantee support for browsers outside of our compatibility matrix.
47
79
48
80
49
81
### Manually Building
50
82
51
-
If you wish to build the polyfills yourself, you'll need `node` and `gulp` on your system:
83
+
If you wish to build the bundles yourself, you'll need `node` and `npm` on your system:
52
84
53
85
* install [node.js](http://nodejs.org/) using the instructions on their website
54
86
* use `npm` to install [gulp.js](http://gulpjs.com/): `npm install -g gulp`
@@ -57,10 +89,11 @@ Now you are ready to build the polyfills with:
57
89
58
90
# install dependencies
59
91
npm install
92
+
bower install
60
93
# build
61
94
gulp build
62
95
63
-
The builds will be placed into the `dist/` directory.
96
+
The builds will be placed into the root directory.
64
97
65
98
## Contribute
66
99
@@ -76,11 +109,11 @@ Copyright (c) 2015 The Polymer Authors. All rights reserved.
76
109
77
110
### `WebComponentsReady`
78
111
79
-
Under 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.
112
+
Under 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.
80
113
81
-
The webcomponents.jsand 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`.
114
+
The `webcomponents-lite.js` polyfill (as well as the smaller bundles and the loader) 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`.
82
115
83
-
For 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.
116
+
For these situations, 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.
Under 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.
105
-
106
-
The 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:
... 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.
113
-
114
-
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).
115
-
116
-
### Element wrapping / unwrapping limitations <aid="wrapping"></a>
117
-
The 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:
118
-
* 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.
119
-
* 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.
120
-
121
-
In order to work around these limitations the polyfill provides the `ShadowDOMPolyfill.wrap` and `ShadowDOMPolyfill.unwrap` methods to respectively wrap and unwrap DOM elements manually.
### ShadowCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work <aid="nestedparens"></a>
148
-
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.
149
-
150
-
### HTML imports: document.currentScript doesn't work as expected <aid="currentscript"></a>
151
-
In native HTML Imports, document.currentScript.ownerDocument references the import document itself. In the polyfill use document._currentScript.ownerDocument (note the underscore).
152
-
153
-
### execCommand and contenteditable isn't supported under Shadow DOM <aid="execcommand"></a>
154
-
See [#212](https://github.com/webcomponents/webcomponentsjs/issues/212)
155
-
156
-
`execCommand`, and `contenteditable` aren't supported under the ShadowDOM polyfill, with commands that insert or remove nodes being especially prone to failure.
142
+
### ShadyCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work <aid="nestedparens"></a>
143
+
ShadyCSS `:host()` rules can only have (at most) 1-level of nested parentheses in its argument selector under ShadyCSS. For example, `:host(.zot)` and `:host(.zot:not(.bar))` both work, but `:host(.zot:not(.bar:nth-child(2)))` does not.
0 commit comments