polymer 自定义元素的CSS学习总结
这是一篇polymer学习教程，关于polymer 自定义元素的css详解。有什么不对的欢迎拍砖。
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变量实现主题化。
原文来自：开源中国