Does the polyfill support css variables in a standards-compliant fashion? I personally got burned on /deep/ getting deprecated, and it kind of looks like css variables aren't settled yet:
http://caniuse.com/#feat=css-variables http://www.w3.org/TR/css-variables/ e On Thu, Jul 16, 2015 at 4:16 PM Nathan Hadfield <[email protected]> wrote: > Kelly, *iron-flex-layout/classes/iron-flex-layout.html* (notice the > */classes/* folder, as opposed to *ion-flex-layout/iron-flex-layout.html*) > provides stylesheet that includes selectors that use */deep/* in order to > reach through to the Shadow DOM. See the documentation in migration.md > <https://github.com/Polymer/docs/blob/master/1.0/docs/migration.md#layout-attributes-replaced-by-layout-classes-and-custom-properties-layout-attributes> > at > Polymer/docs. > > IIRC the Polymer team prefers using CSS vars over classes for layout -- > I'm guessing so that they don't have to make changes when /deep/ is no > longer supported, and as Justin pointed out, so that they don't bleed > unintentionally. > > There is a *:root* selector that you can use to style everything in the > shadow root. (See > https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-style.) > I believe you could use it to make your example work: > > :root .center { > @apply(--layout-center); > } > > In general, though, my understanding is that best practice is to use CSS > vars to theme your elements, as it helps to make explicit what > customization options your components support. In our project, we're > borrowing from the way paper-styles is implemented by defining a > styles.html file that each of our elements import. It defines CSS vars for > our colors, font styles, etc. > > Nathan > > > On Thursday, July 16, 2015 at 1:39:25 PM UTC-6, Kelly St. John wrote: >> >> Hi All, >> >> I'm currently in the midst of migrating an app built on polymer 0.5.4 to >> 1.0. In the 0.5 app I leveraged the core-style element throughout in order >> to apply common styling amongst the various custom elements. I'm not a CSS >> expert by any means (a relative newbie actually), and could really use an >> example of how to do the same using the new 1.0 styling paradigms. I like >> the idea of using a document-level element (via an external html file) to >> store application-level common styles. For instance, one would presume I >> could then place something like this in that document level external file: >> >> <style is="custom-style"> >> >> .center { >> @apply(--layout-center); >> } >> >> .horizontal { >> @apply(--layout-horizontal); >> } >> >> .vertical { >> @apply(--layout-vertical); >> } >> >> >> </style> >> >> >> And use these document level styles by applying classes to any tag in >> the app, like: >> >> <div class="horizontal center"> >> >> However, that approach doesn't seem to be working at the moment. I'm >> likely missing something with the scoping of CSS styles in Polymer 1.0, or >> maybe even barking down the wrong path entirely. I want to employ a >> theming strategy that will continue working as Polymer evolves beyond 1.0. >> I do not want to rewrite this application anytime soon...or it will likely >> be necessary for me to look for other employment. Can someone kindly point >> me in the right direction, please? >> >> Thanks >> > 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/383d2fdc-5a94-43d6-966e-858bbb05a88b%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/383d2fdc-5a94-43d6-966e-858bbb05a88b%40googlegroups.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/CABsi40J49DbyggZZiTcmg_FmXW1WfZ0zs6HRFJj5HiDK0KS%3D3g%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
