CSS custom properties are the way to do theming. Polymer includes support, and the paper elements use them extensively.
On Thu, Jul 16, 2015 at 3:30 PM, Kelly St. John <[email protected]> wrote: > That said...it appears that the use of CSS custom properties may not be > wise based on current browser support for that feature. Is that the case? > > > > On Thursday, 16 July 2015 15:21:33 UTC-7, Kelly St. John wrote: >> >> Thanks Justin. I just read more of the Styling documentation from the >> Styling section of the 1.0 Developer Guide. Here is an important extract >> pertaining to my issue (see below). It seems application-wide 'theming' >> capability is a bit of a casualty stemmed from the necessary removal of >> /deep/ and ::shadow selectors used previously in polymer 0.5. As you >> eluded to above, it seems I'll have to look into how to incorporate the use >> of Custom CSS properties in order to apply 'theming' across elements. >> >> "One solution the Shadow DOM spec authors provided to address the theming >> problem are the /deep/ and::shadow combinators, which allow writing >> rules that pierce through the Shadow DOM encapsulation boundary. Although >> Polymer 0.5 promoted this mechanism for theming, it was ultimately >> unsatisfying for several reasons: >> >> - >> >> Using /deep/ and ::shadow for theming leaks details of an otherwise >> encapsulated element to the user, leading to brittle selectors piercing >> into the internal details of an element’s Shadow DOM that are prone to >> breakage when the internal implementation changes. As a result, the >> structure of of an element’s Shadow DOM inadvertently becomes API surface >> subject to breakage, diminishing the practical effectiveness of Shadow DOM >> as an encapsulation primitive. >> - >> >> Although Shadow DOM’s style encapsulation *improves* the >> predictability of style recalc performance since the side effects of a >> style change are limited to a small subset of the document, using >> /deep/ and::shadow re-opens the style invalidation area and reduces >> Shadow DOM’s effectiveness as a performance primitive. >> - >> >> Using /deep/ and ::shadow leads to verbose and difficult to >> understand selectors. >> >> For the reasons above, the Polymer team is currently exploring other >> options for theming that address the shortcomings above and provide a >> possible path to obsolescence of /deep/ and ::shadow altogether." >> >> >> >> On Thursday, 16 July 2015 14:15:58 UTC-7, Justin Fagnani wrote: >>> >>> >>> >>> On Thu, Jul 16, 2015 at 1:57 PM, Kelly St. John <[email protected]> wrote: >>> >>>> On a somewhat related note, is there a reason the demos/docs are not in >>>> place for paper-styles in the new 1.0 element catalog? ( >>>> https://elements.polymer-project.org/elements/paper-styles) >>>> >>>> Should I be using paper-styles, or is it experimental? >>>> >>> >>> It's not experimental. I'm not sure why the documentation isn't showing >>> up. >>> >>> >>>> >>>> >>>> >>>> On Thursday, 16 July 2015 12:39:25 UTC-7, 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. >>>>> >>>> >>> This is as intended. The styles are scoped on purpose so that they don't >>> leak downward. It's totally possible that in some component you're using >>> that .center is supposed to have a slightly different styling (especially >>> considering how many ways there are to center), and you wouldn't want to >>> override it. >>> >>> The correct approach is to apply the properties where you need them. In >>> the host of that <div>, use @apply: >>> >>> .my-class { >>> @apply(--layout-center); >>> } >>> >>> <div class="my-class"></div> >>> >>> If you want to pass styles down the tree, and through scope boundaries, >>> then you can use CSS custom properties, but it's always up to the element >>> in a scope to choose to apply the property. In that way it's opt-in from >>> the element's point of view. >>> >>> Does that help? >>> >>> Cheers, >>> Justin >>> >>> >>> >>>> 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/3759a8f4-2da7-4fca-b51a-77f57d2d8d8f%40googlegroups.com >>>> <https://groups.google.com/d/msgid/polymer-dev/3759a8f4-2da7-4fca-b51a-77f57d2d8d8f%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/a071aece-1937-42fb-8d5c-c972a52c7b77%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/a071aece-1937-42fb-8d5c-c972a52c7b77%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/CAEKsHmDBwrwEb2B0DNEO2PDzJOU%3Djqb95_ZcvsPtSWxVq9ToCg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
