Polymer入门(四)设置样式

通过之前的三节,我们已经知道如何去自定义一个Polymer Element,可以讲一个Web App剖开分成数个组件。
而在这里,我们讨论的是如何设置样式。

之前我们提到过,Element可以在polymer-element标签内使用style标签或者link一个css来设置样式,例如:

<polymer-element>
  <style>/**/</style>
  <link rel="stylesheet" href="...">
  <!--  -->
</polymer-element>

在这里设置的样式是属于这个shadow dom的,也就是说,并不会影响到全局。

:host 选择器

:host选择器可以修改这个自定义元素自己的样子,也就是说,它对起作用。

这个可能是最常用的Polymer特殊选择器了。

Polyfill 选择器

在第二节我们提过,可以使用具有select属性的content标签来选择填充的内容,那么如何对其进行style呢?由于content标签作用之后为shadow dom,常规的选择器无法对其作用,所以这个时候我们需要polyfill选择器。

polyfill-next-selector选择器是用来将原生的css选择器替换为polyfill。只需要在这个选择器的上边放置这个选择器,再其内部添加一个content属性,它的值必须是一个与原生的规则相同的选择器。

我们知道,使用了content标签之后,会在原node下插入一个::content插入点,如果对其下面的img标签进行选择,可以这样:

polyfill-next-selector { content: ':host img'; }
::content img {/**/}

具体的理解,需要深入探讨polyfill,这里不再深究。

Table of Contents