摘要：样式不会被上层的组件介入影响，更不会被内层组件影响。这对保护样式不受未知的，不可控的外界因素所干扰非常有用。形式上感觉就是这个自定义的变量称为一个新的属性，可以被赋值正如我们小标题上的称呼自定义属性。
前言
已经好久没有更新Polymer专栏，之前几个月由于受到工作上的突然变故，导致学习和撰写无法顺利开展，好在目前各方面都已经暂时稳定下来，期间有不少对Polymer感兴趣的坛友通过评论或者私信的形式向我表达了不要断更的期望，我在这里也想对他们说声谢谢。
今天我们继续Polymer的样式篇，刚刚在新机器下部署好了Polymer的开发环境，发现时隔2个月Polymer已然悄悄升级到了1.3版本（虽然我还没去了解新版本的变更），这也说明了Google对这个框架的重视程度，给我们学习Polymer的朋友们打了一针强心剂。（建议大家在阅读本文前执行bower update命令来更新Polymer到最新版）
正题 跨作用域的样式 背景对于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
{{title}}
我们可以看到span上的className为title,而titile的定义里出现了奇怪的东西var (xxxxxx)
.title{
color: var(--my-toolbar-title-color);
}
我们望文生义一下，从字面上理解这个color应该是个动态的值，具体颜色一定是由外部使用这个component的父component来决定的，而--my-toolbar-title-color应该就是一个变量名，存放外部传入的具体颜色值。
接下去我们再定义一个父component来使用这个my-toolbar
运行结果一目了然，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的样式块。
{{title}}
之后对my-element也做一下修改
运行结果
我们可以看到@apply和之前的var作用其实是类似的，只不过@apply定义的变量接收的是由多条style规则组成的块。
好了，夜已深，可能讲完整个style章节需要总共4-5个小节，今天第2小节就讲到到这里吧，我尽量抽时间写完。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/78757.html
摘要：为嘛会这样呢，动态添加就不需要手动刷新，而动态设置自定义属性就需要我猜测可能的原因是如果用户同时设置多个自定义属性，比如这样如果让自动去刷新视图可能就要执行次，用户手动自己在最后一次性刷新的话能提升一定的性能。 一些和自定义css属性有关的API上篇中我们介绍了如何自定义css变量，从而在外部定义一些具体的值，由外部component传入子component后动态的改变，子compon...
摘要：好久没有更新了，今天更一篇样式篇。使用的是规则来限定每个自定义组件的样式范围即每个组件都可以定义自己内部独立的样式，而不受外界全局样式的干扰。现在觉得的写法有些冗长，会在后续版本中加以改进，我们也拭目以待 好久没有更新了，今天更一篇样式篇。 Polyermer使用的是Shadow DOM styling规则来限定每个自定义组件的样式范围（即每个组件都可以定义自己内部独立的样式，而不受外...
摘要：组件也一样，从被创建，被解析，被赋初始化值，被添加到舞台，被绘制，被布局，使用过程中被修改了值，被重绘，被重新布局，最终被父组件移除结束惨淡的一身等等，都可以称为组件的生命周期。 这篇来谈谈polymer最核心的一块，也可以说是web components技术最最核心的一块内容 生命周期，大家在学习一些框架的时候最好都去了解一下它们的生命周期。 什么是生命周期 什么是生命周期？故名思议...
摘要：所以又以一个库的身份出现在世人面前，它现阶段要做的就是使用的规范来进行开发，并且提供了一套底层实现来填补了各大浏览器暂不支持的，我们称为填充物也就是要干的事情。 书接上回上一篇我们介绍了神马是Polymer，这一篇我们来做些正式编码前的准备工作，顺便也扯一扯Polymer的真面目 如何安装Polymer 有两种方式：第一种是bower安装，不要问我bower是什么，不会bower的话，...
摘要：我们修改下例子定义借口，构造时将重新赋值测试一下这种构造函数传参的方式只适用于，的创建方式，而且它种方式不支持，原因你自己拍脑袋想想就懂了。 之前一篇算是带大家大致领略了一下Polymer的风采。这篇我们稍微深入一丢丢，讲下组件的注册和创建。 创建自定义组件的几种方式 这里我们使用Polymer函数注册了一个自定义组件my-element // register an element ...
阅读 2882·2021-09-22 15:20
阅读 2957·2021-09-22 15:19
阅读 3446·2021-09-22 15:15
阅读 2380·2021-09-08 09:35
阅读 2372·2019-08-30 15:44
阅读 3003·2019-08-30 10:50
阅读 3706·2019-08-29 16:25
阅读 1585·2019-08-26 13:55
