I noticed the following comment in an earlier post to this group: > Yes, the plan is to migrate all use of /deep/ and ::shadow in Polymer > elements to custom properties, as it has been removed from the spec and as > noted Chrome has posted deprecation warnings. The vast majority of that > migration was already done during the 1.0 port and anything remaining > should be vestigial at this point and should be cleaned up soon. I opened > an issue for paper-slider; feel free to open issue on any other stragglers > you find (a quick search didn't find any). >
> It is unlikely that Chrome will actually remove support for these > combinators in the immediate future and the Shady DOM styling shim does > support it for now so there is no immediate risk of breakage; however our > team rule is to not rely on them going forward, and users obviously > shouldn't either. I'm thinking using the iron-flex-layout classes (rather than applying layout styles from CSS vars) will continue to work okay even without /deep/ and ::shadow support, as long as you explicitly import the HTML file in each element that uses them. I'd be interested in any advice on this from the Polymer team, though. On Thursday, July 16, 2015 at 5:16:37 PM UTC-6, Nathan Hadfield 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/95f3a0ed-165f-4e79-bbd6-713f42371e0e%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
