diff --git a/README.md b/README.md index f604bc53..a2467365 100644 --- a/README.md +++ b/README.md @@ -160,37 +160,37 @@ Note that `Polymer.dom` is still provided in the `polymer.html` backward-compati Polymer 2.0 elements will stamp their templates into shadow roots created using V1's `attachShadow({mode: 'open'})` by default. As such, user code related to scoped styling, distribution, and events must be adapted to native V1 API. For a great writeup on all Shadow DOM V1 spec changes, [see this writeup](http://hayato.io/2016/shadowdomv1/). Required changes for V1 are summarized below: #### Distribution -* `` insertion points must be changed to `` -* Insertion points that selected content via `` must be changed to named slots: `` -* Selection of distributed content into named slots must use `slot="..."` rather than tag/class/attributes selected by `` -* Re-distributing content by placing a `` into an element that itself has named slots requires placing a `name` attribute on the `` to indicate what content _it_ selects from its host children, and placing a `slot` attribute to indicate where its selected content should be slotted into its parent -* In the V1 "Shady DOM" shim, initial distribution of children into `` is asynchronous (microtask) to creating the `shadowRoot`, meaning distribution occurs after observers/`ready` (in Polymer 1.0's shim, initial distribution occurred before `ready`). In order to force distribution synchronously, call `ShadyDOM.flush()`. +* `` insertion points must be changed to `` +* Insertion points that selected content via `` must be changed to named slots: `` +* Selection of distributed content into named slots must use `slot="..."` rather than tag/class/attributes selected by `` +* Re-distributing content by placing a `` into an element that itself has named slots requires placing a `name` attribute on the `` to indicate what content _it_ selects from its host children, and placing a `slot` attribute to indicate where its selected content should be slotted into its parent +* In the V1 "Shady DOM" shim, initial distribution of children into `` is asynchronous (microtask) to creating the `shadowRoot`, meaning distribution occurs after observers/`ready` (in Polymer 1.0's shim, initial distribution occurred before `ready`). In order to force distribution synchronously, call `ShadyDOM.flush()`. #### Scoped styling -* `::content` CSS pseudo-selectors must be changed to `::slotted`, and may only target immediate children and use no descendant selectors -* `:host-context()` pseudo-selectors have been removed. These were primarily useful for writing bidi rules (e.g. `:host-context([dir=rtl])`); these should be replaced with the [new `:dir(rtl)` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir), which we plan to polyfill in the [styling shim](https://github.com/webcomponents/shadycss) soon -* The previously deprecated `/deep/` and `::shadow` selectors have been completely removed from V1 native support and must not be used (use [CSS custom properties](https://www.polymer-project.org/1.0/docs/devguide/styling#custom-css-properties) to customize styling instead) +* `::content` CSS pseudo-selectors must be changed to `::slotted`, and may only target immediate children and use no descendant selectors +* `:host-context()` pseudo-selectors have been removed. These were primarily useful for writing bidi rules (e.g. `:host-context([dir=rtl])`); these should be replaced with the [new `:dir(rtl)` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir), which we plan to polyfill in the [styling shim](https://github.com/webcomponents/shadycss) soon +* The previously deprecated `/deep/` and `::shadow` selectors have been completely removed from V1 native support and must not be used (use [CSS custom properties](https://www.polymer-project.org/1.0/docs/devguide/styling#custom-css-properties) to customize styling instead) #### Scoped events -* Code using `Polymer.dom(event).localTarget` should change to the V1 standard API `event.target` -* Code using `Polymer.dom(event).path` (aka V0 `event.path`) should change to the V1 standard API `event.composedPath()` -* Code using `Polymer.dom(event).rootTarget` (aka V0 `event.path[0]`) should change to the V1 standard API `event.composedPath()[0]` +* Code using `Polymer.dom(event).localTarget` should change to the V1 standard API `event.target` +* Code using `Polymer.dom(event).path` (aka V0 `event.path`) should change to the V1 standard API `event.composedPath()` +* Code using `Polymer.dom(event).rootTarget` (aka V0 `event.path[0]`) should change to the V1 standard API `event.composedPath()[0]` ### V1 Custom Elements Polymer 2.0 elements will target the V1 Custom Elements API, which primarily changes the "created" step to actually invoke the `class` constructor, imposes new restrictions on what can be done in the `constructor` (previously `createdCallback`), and introduces different callback names. -* Changes to callback names: +* Changes to callback names: * When using `Polymer({...})` from the compatibility layer, all callbacks should use legacy Polymer API names (`created`, `attached`, `detached`, `attributeChanged`) * When extending from `Polymer.Element`, users should override the V1 standard callback names and call `super()`: * `created` changes to `constructor` * `attached` changes to `connectedCallback` * `detached` changes to `disconnectedCallback` * `attributeChanged` changes to `attributeChangedCallback` -* The V1 Custom Elements spec forbids reading attributes, children, or parent information from the DOM API in the `constructor` (or `created` when using the legacy API). Likewise, attributes and children may not be added in the `constructor`. Any such work must be deferred (e.g. until `connectedCallback` or microtask/`setTimeout`/`requestAnimationFrame`). -* Polymer will no longer produce type-extension elements (aka `is="..."`). Although they are still included in the V1 Custom Elements [spec](https://html.spec.whatwg.org/#custom-elements-customized-builtin-example) and scheduled for implementation in Chrome, because Apple [has stated](https://github.com/w3c/webcomponents/issues/509#issuecomment-233419167) it will not implement `is`, we will not be encouraging its use to avoid indefinite reliance on the Custom Elements polyfill. Instead, a wrapper custom element can surround a native element, e.g. `...` could become `...`. Users will need to change existing `is` elements where necessary. -* All template type extensions provided by Polymer have now been changed to standard custom elements that take a `