On Thu, Apr 17, 2014 at 4:51 PM, Rob Dodson <[email protected]> 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<http://robdodson.me/blog/2014/04/10/shadow-dom-css-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<http://drafts.csswg.org/css-scoping/>to > keep tabs on things > > > Additional resources on styling are available in the Polymer styling > docs<http://www.polymer-project.org/docs/polymer/styling.html>, > Eric Bidelman’s Guide to Styling > Elements<http://www.polymer-project.org/articles/styling-elements.html>, > and the series of HTML5 Rocks posts on Shadow DOM > (1<http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/>, > 2 <http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/>, > 3<http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/>). > 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<http://stackoverflow.com/questions/23036000/using-change-watchers-to-observe-native-properties-under-object-observe> > . > 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 <https://github.com/Polymer/polymer/issues/379>, > 2<https://github.com/Polymer/polymer/issues/123> > ). > > 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 [email protected]. > 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<https://groups.google.com/d/msgid/polymer-dev/CAJj5OwC_ZSyy3%3D%3DOfFp2XvN3EAD550O%3D4dtwGU8dsT%2BEUnNDbg%40mail.gmail.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCB_J8HhNg10%3DW%2B5HzRmQdW_As0zoLHcX0Gq4tHGkT2n_w%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
