Re: [polymer-dev] Re: Help with Polymer 1.0 CSS Styling
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 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,
[polymer-dev] Re: Help with Polymer 1.0 CSS Styling
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:
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 polymer-dev+unsubscr...@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.
Re: [polymer-dev] Re: Help with Polymer 1.0 CSS Styling
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+unsubscr...@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
https://groups.google.com/d/msgid/polymer-dev/3759a8f4-2da7-4fca-b51a-77f57d2d8d8f%40googlegroups.com?utm_medium=emailutm_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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CAEKsHmDK-shKBHJ%2BnX6g2JqUBJW9p9-cSC0fee0KthyWvvs2rw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Re: Help with Polymer 1.0 CSS Styling
*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.
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. 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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/f3d8b0d9-1eab-4e1c-b36a-3558fec6b393%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Re: Help with Polymer 1.0 CSS Styling
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 polymer-dev+unsubscr...@googlegroups.com.
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.
Re: [polymer-dev] Re: Help with Polymer 1.0 CSS Styling
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 ke...@qfin.net
javascript: 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,
[polymer-dev] Re: Help with Polymer 1.0 CSS Styling
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 polymer-dev+unsubscr...@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.
For more options, visit https://groups.google.com/d/optout.
Re: [polymer-dev] Re: Help with Polymer 1.0 CSS Styling
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 ke...@qfin.net 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 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
Re: [polymer-dev] Re: Help with Polymer 1.0 CSS Styling
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 hadfie...@gmail.com 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 polymer-dev+unsubscr...@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
https://groups.google.com/d/msgid/polymer-dev/383d2fdc-5a94-43d6-966e-858bbb05a88b%40googlegroups.com?utm_medium=emailutm_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 polymer-dev+unsubscr...@googlegroups.com.
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.
Re: [polymer-dev] Re: Help with Polymer 1.0 CSS Styling
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 hadf...@gmail.com
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 polymer-dev...@googlegroups.com 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=emailutm_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 polymer-dev+unsubscr...@googlegroups.com.
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.
