Using polymer css variables

Question

I can't get my head around how to use custom css variables with polymer. At the moment I'm making an overlay with "iron-overlay-behaviour".

This includes the "iron-overlay-backdrop" element that has various css variables defined. The one I'm interested in mainly is the --iron-overlay-backdrop-opacity.

I can get these to work in my main index.html file by adding

  <style is="custom-style">
    :root {
      --iron-overlay-backdrop-opacity: 0.4;
    }
 </style>

But I don't want to define styles there! I want to define them inside my custom overlay element.

How do I use these inside my custom element?

I've tried using them like this

<dom-module id="faq-overlay">

<style>

:host {
  --iron-overlay-backdrop-opacity: 0.3;
  --iron-overlay-backdrop-background-color: red;
}
...

But that doesn't work. Is there any way to do this?

Answer 1

I believe what you're looking for is this: (in your theme file)

<style is="custom-style">
  :root {
    --iron-overlay-backdrop-opacity: 0.7;
    --background-r: 0;
    --background-g: 0;
    --background-b: 255;
    --background-color: blue;
    --iron-overlay-backdrop-background-color: rgba(var(--background-r),var(--background-g),var(--background-b),var(--iron-overlay-backdrop-opacity));
  }
 </style>

and in your custom element

<style is="custom-style">
    :host paper-material.custom {
       background-color: var(--iron-overlay-backdrop-background-color);
    }
</style>

Answer 2

Polymer use a custom implementation of css variables, due to a bug in Safari (as told by Polymer).

See here: https://www.polymer-project.org/1.0/docs/devguide/settings (at the bottom of the page).

To use the browser implementation, tell it to Polymer:

<script>
  window.Polymer = {
     useNativeCSSProperties: true
  };
</script>