polymer1.0 样式（2）

跨做用域的样式

背景

对于Webcomponent而言，Shadow Dom 带来了不少做用域以及样式封装之类的好处，使得组件在CSS影响范围上变得更加安全和简单。样式不会被上层的组件介入影响，更不会被内层组件影响。

这对保护样式不受未知的，不可控的外界因素所干扰很是有用。可是当你想要刻意去修改一个自定义组件的样式时该怎么办？咱们常常要面临这个问题，好比在某个固定的主题（theme）下作一些针对某些组件的特殊的样式修改。举个例子，“custom-checkbox”组件使用 .checked这个class，而另一个component也碰巧使用了.checked 这个class的时候Polymer提供的Shadow Style功能就很好的解决了同名class相互影响，相互污染的问题。

为了解决污染的问题传统的作法每每是，给css定义加上不少前缀，以前加上不少dom层级的定义（相似于namespace）来区分重名的class，而有了Shadow Style以后，妈妈就不再担忧class重名了。

自定义CSS属性（或者称为变量更加合适）

咱们先来看一段代码，定义一个component

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-toolbar">
    <style>
        :host{
            padding: 4px;
            background-color: gray;
        }
        .title{
            color: var(--my-toolbar-title-color);
        }
    </style>
    <template>
        <span class="title">{{title}}</span>
    </template>
    <script>
        Polymer({
            is: 'my-toolbar',
            properties: {
                title: String
            }
        });
    </script>
</dom-module>

咱们能够看到span上的className为title,而titile的定义里出现了奇怪的东西var (xxxxxx)

.title{
    color: var(--my-toolbar-title-color);
}

咱们望文生义一下，从字面上理解这个color应该是个动态的值，具体颜色必定是由外部使用这个component的父component来决定的，而--my-toolbar-title-color应该就是一个变量名，存放外部传入的具体颜色值。
接下去咱们再定义一个父component来使用这个my-toolbar

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="my-toolbar.html">
<dom-module id="my-element">
    <style>
        :host{
            --my-toolbar-title-color: green;
        }

        .warning{
            --my-toolbar-title-color:red;
        }
    </style>
    <template>
        <my-toolbar title="This one is green."></my-toolbar>
        <my-toolbar title="This one is green too."></my-toolbar>
        <my-toolbar class="warning" title="This one is red."></my-toolbar>
    </template>
    <script>
        Polymer({
            is: 'my-element'
        });
    </script>
</dom-module>

运行结果一目了然，my-toolbar这个component中定义的css变量能够被外部使用它的my-element这个父component赋值。形式上感受就是--my-toolbar-title-color这个自定义的变量称为一个新的css属性，能够被赋值（正如咱们小标题上的称呼—— 自定义css属性）。

固然你也能够给var --my-toobar-title-color一个默认的初始值，以防外界没有给它赋值，如

color: var(--my-toolbar-title-color, blue);

这种自定义css属性，对于扩展咱们传统的样式十分有帮助，尤为是切换不一样配色的主题时，目前Firefox已经原生支持这种写法，chrome和safari也已经宣称要支持这一特性，鼓掌！

自定义CSS代码块

了解过sass的朋友应该对@mixin不陌生，polymer也提供了整块整块定义css样式的功能，先看代码，咱们对以前的my-toolbar的代码稍做改动，使用@apply来声明了2个变量接收mixin的样式块。

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-toolbar">
    <style>
        :host{
            padding: 4px;
            background-color: gray;
            /* apply a mixin*/
            @apply(--my-toolbar-theme);
        }
        .title{
            @apply(--my-toolbar-title-theme);
        }
    </style>
    <template>
        <span class="title">{{title}}</span>
    </template>
    <script>
        Polymer({
            is: 'my-toolbar',
            properties: {
                title: String
            }
        });
    </script>
</dom-module>

以后对my-element也作一下修改

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="my-toolbar.html">
<dom-module id="my-element">
    <style>
        /* Apply custom theme to toolbars */
      :host {
        --my-toolbar-theme: {
          background-color: yellow;
          border-radius: 4px;
          border: 1px solid gray;
        };
        --my-toolbar-title-theme: {
          color: green;
        };
      }

      /* Make only toolbars with the .warning class red and bold */
      .warning {
        --my-toolbar-title-theme: {
          color: red;
          font-weight: bold;
        };
      }
    </style>
    <template>
        <my-toolbar title="This one is green."></my-toolbar>
        <my-toolbar title="This one is green too."></my-toolbar>
        <my-toolbar class="warning" title="This one is red."></my-toolbar>
    </template>
    <script>
        Polymer({
            is: 'my-element'
        });
    </script>
</dom-module>

运行结果
咱们能够看到@apply和以前的var做用实际上是相似的，只不过@apply定义的变量接收的是由多条style规则组成的块。