Important: Breaking changes in Chrome 35
Rob Dodson
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
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.
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.
