Skip to content
This repository was archived by the owner on Sep 20, 2019. It is now read-only.

Commit 19ffcd9

Browse files
committed
release v0.7.21
2 parents ce9c859 + b76bfaa commit 19ffcd9

16 files changed

+573
-63
lines changed

CustomElements.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* Code distributed by Google as part of the polymer project is also
88
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
99
*/
10-
// @version 0.7.20
10+
// @version 0.7.21
1111
if (typeof WeakMap === "undefined") {
1212
(function() {
1313
var defineProperty = Object.defineProperty;

CustomElements.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

HTMLImports.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* Code distributed by Google as part of the polymer project is also
88
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
99
*/
10-
// @version 0.7.20
10+
// @version 0.7.21
1111
if (typeof WeakMap === "undefined") {
1212
(function() {
1313
var defineProperty = Object.defineProperty;
@@ -948,7 +948,7 @@ window.HTMLImports.addModule(function(scope) {
948948
if (doc && this._mayParse.indexOf(doc) < 0) {
949949
this._mayParse.push(doc);
950950
var nodes = doc.querySelectorAll(this.parseSelectorsForNode(doc));
951-
for (var i = 0, l = nodes.length, p = 0, n; i < l && (n = nodes[i]); i++) {
951+
for (var i = 0, l = nodes.length, n; i < l && (n = nodes[i]); i++) {
952952
if (!this.isParsed(n)) {
953953
if (this.hasResource(n)) {
954954
return nodeIsImport(n) ? this.nextToParseInDoc(n.__doc, n) : n;

HTMLImports.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

MutationObserver.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* Code distributed by Google as part of the polymer project is also
88
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
99
*/
10-
// @version 0.7.20
10+
// @version 0.7.21
1111
if (typeof WeakMap === "undefined") {
1212
(function() {
1313
var defineProperty = Object.defineProperty;

MutationObserver.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,35 @@ window.addEventListener('WebComponentsReady', function(e) {
9090

9191
## Known Issues
9292

93+
* [Limited CSS encapsulation](#encapsulation)
94+
* [Element wrapping / unwrapping limitations](#wrapping)
9395
* [Custom element's constructor property is unreliable](#constructor)
9496
* [Contenteditable elements do not trigger MutationObserver](#contentedit)
9597
* [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)
96100
* [execCommand isn't supported under Shadow DOM](#execcommand)
97101

102+
### Limited CSS encapsulation <a id="encapsulation"></a>
103+
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.
104+
105+
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:
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 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+
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/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+
120+
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.
121+
98122
### Custom element's constructor property is unreliable <a id="constructor"></a>
99123
See [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for background.
100124

@@ -119,6 +143,12 @@ don't work, despite working under native Shadow DOM. The solution is to use `pol
119143
polyfill-next-selector { content: '.foo :host.bar, :host.foo.bar'; }
120144
```
121145

146+
### ShadowCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work <a id="nestedparens"></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="currentscript"></a>
150+
In native HTML Imports, document.currentScript.ownerDocument references the import document itself. In the polyfill use document._currentScript.ownerDocument (note the underscore).
151+
122152
### execCommand and contenteditable isn't supported under Shadow DOM <a id="execcommand"></a>
123153
See [#212](https://github.com/webcomponents/webcomponentsjs/issues/212)
124154

ShadowDOM.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* Code distributed by Google as part of the polymer project is also
88
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
99
*/
10-
// @version 0.7.20
10+
// @version 0.7.21
1111
if (typeof WeakMap === "undefined") {
1212
(function() {
1313
var defineProperty = Object.defineProperty;
@@ -3411,10 +3411,7 @@ window.ShadowDOMPolyfill = {};
34113411
var unwrappedActiveElement = unwrap(this).ownerDocument.activeElement;
34123412
if (!unwrappedActiveElement || !unwrappedActiveElement.nodeType) return null;
34133413
var activeElement = wrap(unwrappedActiveElement);
3414-
if (activeElement === this.host) {
3415-
return null;
3416-
}
3417-
while (!this.contains(activeElement) && !this.host.contains(activeElement)) {
3414+
while (!this.contains(activeElement)) {
34183415
while (activeElement.parentNode) {
34193416
activeElement = activeElement.parentNode;
34203417
}

ShadowDOM.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "webcomponentsjs",
33
"main": "webcomponents.js",
4-
"version": "0.7.20",
4+
"version": "0.7.21",
55
"homepage": "http://webcomponents.org",
66
"authors": [
77
"The Polymer Authors"

0 commit comments

Comments
 (0)