Mixin, классы и пользовательские элементы в Polymer

Question

Я создаю файл с именем my-mixins.html содержащий:

<link rel="import" href="../polymer/polymer.html">
<style is="custom-style">
  :root {
    --red: {
      color: red;
    };
  }

  // This won't work
  .green: {
    color: green;
  }
</style>

Затем я создаю элемент my-element.html:

<link rel="import" href="bower_components/my-mixins/my-mixins.html">

<link rel="import" href="../polymer/polymer.html">

<dom-module is="my-element">
  <style>
    .red {
      @apply(--red);
    }
    ...
  </style>

  <p class="red">This is red</p>
  <p class="green">This is not green</p>

  <script>
    Polymer({
      is: 'my-element'
    });
  </script>

</dom-module>

В то время как --red работал (как положено), .green не сделал. Я понимаю, что это нужно для того, чтобы стиль не пролился и т.д. Но... каково здесь действительное правило? Как так --red был установлен и доступен для модуля, тогда как green нет?

Answer 1

Ответ на мой конкретный вопрос был здесь:

https://www.polymer-project.org/1.0/docs/devguide/styling

В частности:

Полимер обеспечивает Пользовательский элемент для определения стилей в основном документе, который может использовать некоторые особенности системы стилей Polymer:

Стили документов, определенные в пользовательском стиле, не используются, чтобы гарантировать, что они не попадут в локальный DOM при работе в браузерах без встроенного Shadow DOM.

Пользовательские свойства, используемые шайбой Polymer для стилевого оформления, могут быть определены в пользовательском стиле. Используйте селектор: root для определения пользовательских свойств, которые применяются ко всем пользовательским элементам.

Итак, документы объясняют, что :root Селектор, в частности, должен использоваться для установки пользовательских свойств между областями действия...

Answer 2

Я считаю, что это работает таким образом, чтобы обеспечить возможность настройки внутренних стилей с использованием пользовательских свойств CSS в качестве заполнителей стилей.

Тогда как причина .green не протекает из-за ограниченных возможностей CSS в Shadow DOM.

Вы можете прочитать больше о стайлхуксах в учебнике Эрика Бидельмана Shadow DOM v1.