Merge pull request #680 from webcomponents/cleanup-readme

Cleanup readme and add sd-ce bundle

README.md

@@ -71,7 +71,7 @@ Copyright (c) 2015 The Polymer Authors. All rights reserved.
 
 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.
 
-The `webcomponents-lite.js` polyfill 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`.
+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`.
 
 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.
 
@@ -84,34 +84,9 @@ window.addEventListener('WebComponentsReady', function(e) {
 
 ## Known Issues
 
-  * [Limited CSS encapsulation](#encapsulation)
-  * [Element wrapping / unwrapping limitations](#wrapping)
   * [Custom element's constructor property is unreliable](#constructor)
   * [Contenteditable elements do not trigger MutationObserver](#contentedit)
-  * [ShadowCSS: :host-context(...):host(...) doesn't work](#hostcontext)
-  * [ShadowCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work](#nestedparens)
-  * [HTML imports: document.currentScript doesn't work as expected](#currentscript)
-  * [execCommand isn't supported under Shadow DOM](#execcommand)
-
-### Limited CSS encapsulation <a id="encapsulation"></a>
-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.
-
-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:
-
-```
-WebComponents.ShadowCSS.shimStyling( shadowRoot, scope );
-```
-
-... 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.
-
-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).
-
-### Element wrapping / unwrapping limitations <a id="wrapping"></a>
-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:
-   * 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.
-   * 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.
-
-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.
+  * [ShadyCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work](#nestedparens)
 
 ### Custom element's constructor property is unreliable <a id="constructor"></a>
 See [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for background.
@@ -124,26 +99,5 @@ It's worth noting that `customElement.__proto__.__proto__.constructor` is `HTMLE
 Using the MutationObserver polyfill, it isn't possible to monitor mutations of an element marked `contenteditable`.
 See [the mailing list](https://groups.google.com/forum/#!msg/polymer-dev/LHdtRVXXVsA/v1sGoiTYWUkJ)
 
-### ShadowCSS: :host-context(...):host(...) doesn't work <a id="hostcontext"></a>
-See [#16](https://github.com/webcomponents/webcomponentsjs/issues/16) for background.
-
-Under the shadow DOM polyfill, rules like:
-```
-:host-context(.foo):host(.bar) {...}
-```
-don't work, despite working under native Shadow DOM. The solution is to use `polyfill-next-selector` like:
-
-```
-polyfill-next-selector { content: '.foo :host.bar, :host.foo.bar'; }
-```
-
-### ShadowCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work <a id="nestedparens"></a>
-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.
-
-### HTML imports: document.currentScript doesn't work as expected <a id="currentscript"></a>
-In native HTML Imports, document.currentScript.ownerDocument references the import document itself. In the polyfill use document._currentScript.ownerDocument (note the underscore).
-
-### execCommand and contenteditable isn't supported under Shadow DOM <a id="execcommand"></a>
-See [#212](https://github.com/webcomponents/webcomponentsjs/issues/212)
-
-`execCommand`, and `contenteditable` aren't supported under the ShadowDOM polyfill, with commands that insert or remove nodes being especially prone to failure.
+### ShadyCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work <a id="nestedparens"></a>
+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.

entrypoints/webcomponents-sd-ce-index.js

@@ -0,0 +1,22 @@
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+'use strict';
+
+/*
+ * Polyfills loaded: Custom Elements, Shady DOM/Shady CSS
+ * Used in: Safari 9, Firefox, Edge
+ */
+
+import '../bower_components/shadydom/shadydom.min.js'
+import '../bower_components/custom-elements/custom-elements.min.js'
+import '../bower_components/shadycss/src/ShadyCSS.js'
+import '../bower_components/shadycss/src/custom-style-element.js'
+import '../src/post-polyfill.js'
+import '../src/unresolved.js'

gulpfile.js

@@ -83,6 +83,10 @@ gulp.task('minify-hi-sd-ce-pf', () => {
   return minify('webcomponents-hi-sd-ce-pf', 'webcomponents-lite', true)
 });
 
+gulp.task('minify-sd-ce', () => {
+  return minify('webcomponents-sd-ce')
+});
+
 gulp.task('refresh-bower', () => {
   return del('bower_components').then(() => {
     let resolve, reject;
@@ -96,4 +100,4 @@ gulp.task('default', (cb) => {
   runseq('refresh-bower', 'build', cb);
 });
 
-gulp.task('build', ['minify-none', 'minify-hi', 'minify-hi-ce', 'minify-hi-sd-ce', 'minify-hi-sd-ce-pf']);
+gulp.task('build', ['minify-none', 'minify-hi', 'minify-hi-ce', 'minify-hi-sd-ce', 'minify-hi-sd-ce-pf', 'minify-sd-ce']);