Использование переменных полимера css

Я не могу понять, как использовать пользовательские переменные css с полимером. На данный момент я делаю наложение с "железом-наложением-поведением".

Это включает элемент "железо-наложение-фон", который имеет различные переменные css. В первую очередь меня интересует непрозрачность -iron-overlay-backdrop-opacity.

I может заставить их работать в моем основном файле index.html, добавив

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

Но я не хочу определять стили там! Я хочу определить их внутри моего пользовательского элемента overlay.

Как использовать их внутри моего пользовательского элемента?

Я пробовал использовать их вот так

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

<style>

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

Но это не работает. Есть ли способ сделать это?

Ответы

Ответ 1

Я верю, что вы ищете: (в вашем файле темы)

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

и в вашем пользовательском элементе

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

Ответ 2

Полимер использует пользовательскую реализацию переменных css из-за ошибки в Safari (как сказал Полимер).

Смотрите здесь: https://www.polymer-project.org/1.0/docs/devguide/settings (внизу страницы).

Чтобы использовать реализацию браузера, скажите ему Полимер:

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