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

skinner 发布于2019-08-21 10:44 / 1198人阅读

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

好久没有更新了，今天更一篇样式篇。

Polyermer使用的是Shadow DOM styling规则来限定每个自定义组件的样式范围（即每个组件都可以定义自己内部独立的样式，而不受外界全局样式的干扰）。如何定义组件内部样式呢，我们需要在标签内使用

主index.html的代码




    
    
    


    native div of index page
    
        I"m content child of sub element

运行结果如下：

可以看到我们在主index.html里也定义了一个#child-element的全局样式，效果为背景绿色，但是这个我们在sub-element中的style设置里对这个样式进行了再次定义，所以最终渲染时会以自组建为先，覆盖父容器中的定义，或者是全局的样式定义。如果我们把sub-element中这个style注释掉，则子组件会使用外层的定义，显示为绿色。

#child-element {
    /*background: yellow;*/
}

我们接着看style中几个和以往传统写法不一样的地方,

:host {
    display: block;
    border: 1px solid red;
}

:host 是对宿主子容器进行设定，你可以把它当成是，或者是

.content-wrapper >::content .special {
    background: silver;
}

::content 是对被插入的child标签进行设定，也就是途中灰色的

I"m content child of sub element

.content-wrapper >::content .special
---->最终会被翻译成
.content-wrapper >.special

为什么要让自定义组件的style有自己独立的作用域呢！道理其实请简单，我们开发一套系统一般都要定义全局一套主题，每个控件的样色设计风格要统一一致，但是一旦我对某些组件进行了扩展，需要一些特殊的样式设置，我们就可以在每个自定义组件内部进行设置，而不需要破坏全局的css文件。
Polymer team现在觉得::content的写法有些冗长，会在后续版本中加以改进，我们也拭目以待

GPU云服务器云服务器第6篇第1篇第2篇第3篇

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

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

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

摘要：为嘛会这样呢，动态添加就不需要手动刷新，而动态设置自定义属性就需要我猜测可能的原因是如果用户同时设置多个自定义属性，比如这样如果让自动去刷新视图可能就要执行次，用户手动自己在最后一次性刷新的话能提升一定的性能。一些和自定义css属性有关的API上篇中我们介绍了如何自定义css变量，从而在外部定义一些具体的值，由外部component传入子component后动态的改变，子compon...

Crazy_Coder 2019-08-19 17:54 评论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 教程第4篇——组件的生命周期

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

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

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

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