开坑，写点Polymer 1.1 教程第6篇——样式（3）

Crazy_Coder 发布于2019-08-19 17:54 / 1844人阅读

摘要：为嘛会这样呢，动态添加就不需要手动刷新，而动态设置自定义属性就需要我猜测可能的原因是如果用户同时设置多个自定义属性，比如这样如果让自动去刷新视图可能就要执行次，用户手动自己在最后一次性刷新的话能提升一定的性能。

一些和自定义css属性有关的API
上篇中我们介绍了如何自定义css变量，从而在外部定义一些具体的值，由外部component传入子component后动态的改变，子component的样式。但是这一切都是声明式的也就是说在运行前这些样式就已经决定了，如果你需要在运行时动态的改变一些自定义属性定义的样式，那你就要使用一些polymer提供的API了。

customStyle和updateStyles

下面来看一个例子
还是把my-toolbar改回来，不用@mixin 还是用var(--my-toolbar-title-color)

接下去创建一个父component x-custom

来看几行关键代码

这个style上上一篇的外部定义变量无异，给一个初始的文字颜色red。

这里我们给button添加了一个点击事件，当用户点击button时，执行changeTheme的方法，方法里做了2件事情。

修改customStyle属性中的变量 --my-toolbar-title-color 为 blue

调用updateStyles()方法来刷新视图

Run一下，看下效果，初始时文字为red

点击后，文字变成blue，达到目的

为毛要有这2个API呢，为毛polymer不能自动更新视图呢。官方给出的解释是考虑到性能问题。

不过我测试了一下,有一种case是不需要手动updateStyles()的，
比如，下列代码中，我点击按钮动态添加一个class b的dom节点，原本事先在style中定义好的css x-foo.b会立刻生效，并不需要手动刷新。

为嘛会这样呢，动态添加dom就不需要手动刷新，而动态设置自定义css属性就需要updateStyles(),我猜测可能的原因是
如果用户同时设置多个自定义css属性，比如

this.customStyle["--my-toolbar-title-color"] = "blue";
this.customStyle["--my-toolbar-title-color2"] = "red";
this.customStyle["--my-toolbar-title-color3"] = "green";

这样如果让Polymer自动去刷新视图可能就要执行3次render，用户手动自己在最后一次性刷新的话能提升一定的性能。

本篇未完待续...

GPU云服务器云服务器第6篇第3篇 python基础教程第3版pdf 第1篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78955.html

开坑，写点Polymer 1.1 教程第6篇——样式（1）

摘要：好久没有更新了，今天更一篇样式篇。使用的是规则来限定每个自定义组件的样式范围即每个组件都可以定义自己内部独立的样式，而不受外界全局样式的干扰。现在觉得的写法有些冗长，会在后续版本中加以改进，我们也拭目以待好久没有更新了，今天更一篇样式篇。 Polyermer使用的是Shadow DOM styling规则来限定每个自定义组件的样式范围（即每个组件都可以定义自己内部独立的样式，而不受外...

skinner 2019-08-21 10:44 评论0 收藏0
开坑，写点Polymer 1.1 教程第6篇——样式（2）

摘要：样式不会被上层的组件介入影响，更不会被内层组件影响。这对保护样式不受未知的，不可控的外界因素所干扰非常有用。形式上感觉就是这个自定义的变量称为一个新的属性，可以被赋值正如我们小标题上的称呼自定义属性。前言已经好久没有更新Polymer专栏，之前几个月由于受到工作上的突然变故，导致学习和撰写无法顺利开展，好在目前各方面都已经暂时稳定下来，期间有不少对Polymer感兴趣的坛友通过评论...

EdwardUp 2019-08-19 17:40 评论0 收藏0
开坑，写点Polymer 1.0 教程第1篇——安装篇

摘要：所以又以一个库的身份出现在世人面前，它现阶段要做的就是使用的规范来进行开发，并且提供了一套底层实现来填补了各大浏览器暂不支持的，我们称为填充物也就是要干的事情。书接上回上一篇我们介绍了神马是Polymer，这一篇我们来做些正式编码前的准备工作，顺便也扯一扯Polymer的真面目如何安装Polymer 有两种方式：第一种是bower安装，不要问我bower是什么，不会bower的话，...

Jeff 2019-08-21 10:41 评论0 收藏0
开坑，写点Polymer 1.0 教程第3篇——组件注册与创建

摘要：我们修改下例子定义借口，构造时将重新赋值测试一下这种构造函数传参的方式只适用于，的创建方式，而且它种方式不支持，原因你自己拍脑袋想想就懂了。之前一篇算是带大家大致领略了一下Polymer的风采。这篇我们稍微深入一丢丢，讲下组件的注册和创建。创建自定义组件的几种方式这里我们使用Polymer函数注册了一个自定义组件my-element // register an element ...

joywek 2019-08-21 10:42 评论0 收藏0
开坑，写点Polymer 1.0 教程第4篇——组件的生命周期

摘要：组件也一样，从被创建，被解析，被赋初始化值，被添加到舞台，被绘制，被布局，使用过程中被修改了值，被重绘，被重新布局，最终被父组件移除结束惨淡的一身等等，都可以称为组件的生命周期。这篇来谈谈polymer最核心的一块，也可以说是web components技术最最核心的一块内容生命周期，大家在学习一些框架的时候最好都去了解一下它们的生命周期。什么是生命周期什么是生命周期？故名思议...

Dionysus_go 2019-08-21 10:42 评论0 收藏0