這是一篇polymer學(xué)習(xí)教程，關(guān)于polymer 自定義元素的css詳解。有什么不對的歡迎拍磚。

 

CSS樣式優(yōu)先規(guī)則

但同一個元素有定義多個CSS樣式時優(yōu)先規(guī)則是，使用權(quán)重值最高的那個樣式！

CSS權(quán)值相等將使用最后的那條定義！

 

style=””，權(quán)值為1000。

D選擇器【#id】，權(quán)值為100。

class類【.class】權(quán)值為10。

元素【div | p | span】等。 權(quán)值為1。

eg:

#t>span{}   >  .class>span   >  div>span

當(dāng)使用 important 定義CSS時，他的權(quán)重大于未使用CSS定義

div{color:red!important }

 

改變polymer樣式方法

<link rel="import" href="my-elem.html">會在index head 生成這個polymer元素的樣式

<style scope="my-elem">

  my-elem {display: block;}

  h3.my-elem {color: red;}

  h3.my-elem>span.my-elem{color: blue;}</style>

不管使用的是自定義元素還是polymer提供的元素，都會引用頁的head生成這個樣式塊！

生成的style的順序原則  “ 從上到下， 從子到父”  

 

1、直接改自定義元素中的CSS

2、外層定義更高權(quán)值的CSS來覆蓋 （body he.my-elem{color:blue}）

3、使用！important

 

polymer提供更優(yōu)雅的處理CSS設(shè)置問題

1、var(--my-elem-color, red);

定義一個CSS變量 --my-elem-color （--）這個是必須的

red 為默認(rèn)值

    <template>

        <style>

          :host {display: block;}

          h3 {color: var(--my-elem-color, red);}

          h3>span {color: blue;}

        </style>

        <h3>my <span>elem</span> test</h3>

        <p>{{text}}</p>

    </template>

--my-elem-color 變量的賦值

1、my-elem{--my-elem-color:blue}

2、：host{--my-elem-color:blue}

自定義中的CSS變量取值規(guī)則

1、從當(dāng)前元素的作用域開始找 ---在到父元素，即從里往外查找，取最近一個變量值。

同行元素不會被查找。這里提到的父元素是polymer關(guān)系上的父元素，而非DOM樹上的關(guān)系如

<my-elemp>

  <my-elem></my-elem></my-elemp>

my-elemp非my-elem的父元素

下面這樣才是

<link rel="import" href="bower_components/polymer/polymer.html"><link rel="import" href="my-elem.html"><dom-module id="my-elemt">

    <template>

        <style>

        :root {

            --my-elem-color: #ffffff;

        }

        </style>

        <h1>elemt</h1>

        <my-elem></my-elem>

    </template>

    <script>

    Polymer({

        is: "my-elemt"

    });

    </script></dom-module>

 

2、my-elem定義的先查找，未找到后才開始：host定義中查找

：host{--my-elem-color:blue}就把他當(dāng)成用來定義默認(rèn)值用

 

2、<style is="custom-style"></style>

<style is="custom-style">

    :root {

        --my-elem-color: #ffffff;

    }

    my-elem{

        --my-elem-color:blue

    }</style>

這可以定義在父元素上，也可以直接放到最外層，index.html上。

 

css塊定義

       <style>

        :root {

            --my-elem-theme: {

              background-color: green;

              border-radius: 4px;

              border: 1px solid gray;

            };

        }

        </style>

@apply(--my-elem-theme);

跟單個定義使用方法是一樣的！

 

外部CSS引用方法

1、需要以自定義元素的方式：theme-css.html

<dom-module id="theme-css">

  <template>

    <style>

      .red { color: red; }

    </style>

  </template></dom-module>

2、需要導(dǎo)入自定義元素

<link rel="import" href="them-css.html">

3、使用自定義CSS

<style is="custom-style" include="them-css"></style>

自定義元素內(nèi)的使用

<style include="theme-css"></style>

 

動態(tài)改變CSS

changeTheme: function() {

     this.customStyle['--my-toolbar-color'] = 'blue';

     this.updateStyles();

}

 polymer不會動態(tài)刷新視圖需要手動調(diào)整updateStyles();

后期跟進

 

ready: function() {

  this.scopeSubtree(this.$.container, true);

}

polymer元素樣式亂入問題，作用域引起的。特別是自定義元素，有部分是動態(tài)生成時。

目前不是很清楚，后期跟進

 

總結(jié)：

自定義元素中定義的CSS，作用域只在元素本身，只是個假象，應(yīng)該說他是限定以CSS 的CLASS類名作用域。他可影響自定義元素之外的元素，引用類名即可！

但由于polymer自定義元素名的唯一性，并且在生成CSS前統(tǒng)一加上前綴，使其相對作用域在元素本身。

可以通過CSS變量實現(xiàn)主題化。

 

 

 

原文來自：開源中國