Help with Polymer 1.0 CSS Styling

[Kelly St. John]

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

[Kelly St. John]

ps:  Of course, I meant to say that I would be able to use these document level styles by applying classes to any tag in the Local DOM of any custom element in the app.

[Kelly St. John]

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?

On Thursday, 16 July 2015 12:39:25 UTC-7, Kelly St. John wrote:

[Justin Fagnani]

On Thu, Jul 16, 2015 at 1:57 PM, Kelly St. John <ke...@qfin.net> 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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/3759a8f4-2da7-4fca-b51a-77f57d2d8d8f%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Kelly St. John]

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."

[Kelly St. John]

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? 

[Justin Fagnani]

CSS custom properties are the way to do theming. Polymer includes support, and the paper elements use them extensively.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/a071aece-1937-42fb-8d5c-c972a52c7b77%40googlegroups.com.

[Nathan Hadfield]

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 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

[Eric Eslinger]

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

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 polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/383d2fdc-5a94-43d6-966e-858bbb05a88b%40googlegroups.com.

[Nathan Hadfield]

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.

[Nathan Hadfield]

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