Important: Breaking changes in Chrome 35

512 views
Skip to first unread message

Rob Dodson

unread,
Apr 17, 2014, 7:51:37 PM4/17/14
to polymer-dev

Chrome 35 is now in the Beta channel and that means it’s time to start preparing for two very important features: Native Shadow DOM, and Object.observe.


If you’ve been working with Polymer, you need to test your projects in Chrome Beta/Canary now because you may have been inadvertently relying on polyfill behavior. For example, because the Shadow DOM polyfill is not able to truly encapsulate styles, CSS that worked under polyfill may now require additional Shadow DOM selectors.


Native Shadow DOM


For native Shadow DOM we’ve put together a cheat sheet that you can use to quickly get caught up.


Here’s the tl;dr

  • /content/ is now ::content

  • /shadow/ is now ::shadow

  • /shadow-deep/ is now /deep/

  • :host/:host() only matches the host node

  • :ancestor() is now :host-context()

  • resetStyleInheritance, applyAuthorStyles, pseudo/part attributes, cat (^^)/hat(^), and -webkit-distributed are all out

  • And there’s a spec you can follow to keep tabs on things


Additional resources on styling are available in the Polymer styling docs, Eric Bidelman’s Guide to Styling Elements, and the series of HTML5 Rocks posts on Shadow DOM (1, 2, 3). These have all been updated to work in Chrome 35+.


Object.observe()


The native implementation of Object.observe does not receive notifications when properties change on native elements (<input>, <select>, etc). This means that you cannot bind directly to properties on native elements or rely on them in your changed watchers.

Instead of a binding that looks like this:
<google-map-search query="{{ $.foo.value }}">

<input id="foo">


Do this:

<google-map-search query="{{ search_term }}">

<input id="foo" value="{{ search_term }}">


If you need a changed watcher for a native property (title, hidden, draggable, etc) you can use the attributeChanged callback and inspect the name of the attribute that was updated. Eric Bidelman has provided an example on StackOverflow.


We have opened tickets to issue warnings to developers so they can avoid these situations (1, 2).


Reducing Churn


We know that this is a lot of churn to deal with but the reason these changes are necessary is because the features we’ve been after for so long, Shadow DOM and Object.observe, are finally shipping! This means they’ll be on by default in Chrome and more importantly: stable.

Eric Bidelman

unread,
Apr 17, 2014, 8:32:30 PM4/17/14
to Rob Dodson, polymer-dev
On Thu, Apr 17, 2014 at 4:51 PM, Rob Dodson <robd...@google.com> wrote:

Chrome 35 is now in the Beta channel and that means it’s time to start preparing for two very important features: Native Shadow DOM, and Object.observe.


If you’ve been working with Polymer, you need to test your projects in Chrome Beta/Canary now because you may have been inadvertently relying on polyfill behavior. For example, because the Shadow DOM polyfill is not able to truly encapsulate styles, CSS that worked under polyfill may now require additional Shadow DOM selectors.


Native Shadow DOM


For native Shadow DOM we’ve put together a cheat sheet that you can use to quickly get caught up.


Here’s the tl;dr

  • /content/ is now ::content

  • /shadow/ is now ::shadow

  • /shadow-deep/ is now /deep/

  • :host/:host() only matches the host node

  • :ancestor() is now :host-context()

  • resetStyleInheritance, applyAuthorStyles, pseudo/part attributes, cat (^^)/hat(^), and -webkit-distributed are all out

  • And there’s a spec you can follow to keep tabs on things


Additional resources on styling are available in the Polymer styling docs, Eric Bidelman’s Guide to Styling Elements, and the series of HTML5 Rocks posts on Shadow DOM (1, 2, 3). These have all been updated to work in Chrome 35+.


Object.observe()


The native implementation of Object.observe does not receive notifications when properties change on native elements (<input>, <select>, etc). This means that you cannot bind directly to properties on native elements or rely on them in your changed watchers.

Instead of a binding that looks like this:
<google-map-search query="{{ $.foo.value }}">

<input id="foo">


Do this:

<google-map-search query="{{ search_term }}">

<input id="foo" value="{{ search_term }}">


If you need a changed watcher for a native property (title, hidden, draggable, etc) you can use the attributeChanged callback and inspect the name of the attribute that was updated. Eric Bidelman has provided an example on StackOverflow.


To clarify, this workaround only works when properties are exposed as attributes. It won't work for other DOM properties like .children, .offsetTop, etc. So for example, if you define offsetHeightChanged() and .offsetTop changes, the callback won't be called.


We have opened tickets to issue warnings to developers so they can avoid these situations (1, 2).


Reducing Churn


We know that this is a lot of churn to deal with but the reason these changes are necessary is because the features we’ve been after for so long, Shadow DOM and Object.observe, are finally shipping! This means they’ll be on by default in Chrome and more importantly: stable.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAJj5OwC_ZSyy3%3D%3DOfFp2XvN3EAD550O%3D4dtwGU8dsT%2BEUnNDbg%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

Addy Osmani

unread,
Apr 18, 2014, 10:05:51 AM4/18/14
to polym...@googlegroups.com
It is also worth noting that if you are using one of our official polymer-*/core-* elements, these are actively updated and should take into account the breaking changes in Chrome 35. That said, you should `bower update` and test their behaviour in your applications in Stable and Canary regardless for the sake of being thorough. 
Reply all
Reply to author
Forward
0 new messages