polymer 自定义元素的CSS详解【5】

CSS样式优先规则

但同一个元素有定义多个CSS样式时优先规则是，使用权重值最高的那个样式！

CSS权值相等将使用最后的那条定义！

 

style=””，权值为1000。

D选择器【#id】，权值为100。

class类【.class】权值为10。

元素【div | p | span】等。 权值为1。

eg:

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

当使用 important 定义CSS时，他的权重大于未使用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、外层定义更高权值的CSS来覆盖 （body he.my-elem{color:blue}）

3、使用！important

 

polymer提供更优雅的处理CSS设置问题

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

定义一个CSS变量 --my-elem-color （--）这个是必须的

red 为默认值

    <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变量取值规则

1、从当前元素的作用域开始找 ---在到父元素，即从里往外查找，取最近一个变量值。

同行元素不会被查找。这里提到的父元素是polymer关系上的父元素，而非DOM树上的关系如

<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}就把他当成用来定义默认值用

 

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、需要导入自定义元素

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

3、使用自定义CSS

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

自定义元素内的使用

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

 

动态改变CSS

changeTheme: function() {
     this.customStyle['--my-toolbar-color'] = 'blue';
     this.updateStyles();
}

 polymer不会动态刷新视图需要手动调整updateStyles();

后期跟进

 

ready: function() {
  this.scopeSubtree(this.$.container, true);
}

polymer元素样式乱入问题，作用域引起的。特别是自定义元素，有部分是动态生成时。

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

 

总结：

自定义元素中定义的CSS，作用域只在元素本身，只是个假象，应该说他是限定以CSS 的CLASS类名作用域。他可影响自定义元素之外的元素，引用类名即可！

但由于polymer自定义元素名的唯一性，并且在生成CSS前统一加上前缀，使其相对作用域在元素本身。

可以通过CSS变量实现主题化。

 

 

 

转载于:https://my.oschina.net/u/157383/blog/674770