Eric, I think the var() implementation supported by the polyfill is pretty much standard, but my understanding is the @apply() syntax is a Polymer innovation -- see https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins
On Thursday, July 16, 2015 at 5:19:06 PM UTC-6, Eric Eslinger wrote: > > 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] > <javascript:>> 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] <javascript:>. >> 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/e7c531ee-9e88-4d08-9bfd-0f0ff11f9381%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
