Polymer中的Mixin，类和自定义元素

Question

I create a file called my-mixins.html containing:

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

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

Then I create an element 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>

While --red worked (as it's supposed to), .green didn't. I realise this is to make sure that styling doesn't spill etc. But... what's the actual rule here? How come --red was set and it's available to the module, whereas green isn't?

Answer 1

The answer to my specific question was here:

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

Specifically:

Polymer provides a custom element for defining styles in the main document that can take advantage of several special features of Polymer's styling system:

Document styles defined in a custom-style are shimmed to ensure they do not leak into local DOM when running on browsers without native Shadow DOM.

Custom properties used by Polymer's shim for cross-scope styling may be defined in an custom-style. Use the :root selector to define custom properties that apply to all custom elements.

So, the docs explain that the :root selector specifically is to be used to set cross-scope custom properties...

Answer 2

I believe it works that way to provide the option to tweak internal styles using CSS custom properties as style placeholders.

Whereas the reason .green is not leaking is due to the scoped CSS feature of Shadow DOM.

You can read more about stylehooks in Eric Bidelman's Shadow DOM v1 primer