Using {{element_attributes}} in CSS

[Oskar Olsson]

I've been tinkering with polymer over the past week or so. It's easy to use element attributes/properties to set labels and colors by inserting {{attributes}} in the dom structure, but not in the CSS that is inserted. Compare the two examples:

# Example 1

<template><!-- Wont work-->

   <style>

       .custom-button { background: {{color}} }

   </style>

   <paper-button class="custom-button"></paper-button>

</template>

#Example 2

<template><!-- will work -->

   <style>

       .custom-button { background: red; }

   </style>

   <paper-button style="background:{{color}}"></paper-button>

</template>

The second form seems "cleaner" to me. Is there some way to embed or use variables in css rather then in the elements directly?

[Eric Bidelman]

Example 2 is the recommended because bindings in <style> only work under native Shadow DOM. They do not work under the Shadow DOM polyfill.

I recommend checking out <core-style>. It supports bindings inside <style>:

https://www.polymer-project.org/docs/elements/core-elements.html#core-style

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/cf396617-7db8-4c88-ac1d-41abdea7e997%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Oskar Olsson]

A third way is to handle all classes as a variable: 

<paper-button class="{{styles.button}}"></paper-button>

and control styling using 

this.styles.button = ['mybutton', 'special-case-style'].join().replace(",", " ");

Does the global .g variables in <core-style> apply styles across different shadow-dom nodes, in different trees and at different levels? or is it just in the node of the element where you define it?

[Eric Bidelman]

On Sun, Oct 5, 2014 at 3:25 PM, Oskar Olsson <oso...@gmail.com> wrote:

A third way is to handle all classes as a variable: 

<paper-button class="{{styles.button}}"></paper-button>

and control styling using 

this.styles.button = ['mybutton', 'special-case-style'].join().replace(",", " ");

Does the global .g variables in <core-style> apply styles across different shadow-dom nodes, in different trees and at different levels? or is it just in the node of the element where you define it?

It's a way to create a global control that applies to all instances of an element. For example, paper-input defines g.paperInput.focusedColor which applies to all paper-inputs, no matter what tree they're in. In this way you can use it for theming.

 

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/cd297180-bdc3-461b-9e0f-d63cb86e2c5c%40googlegroups.com.