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

2019年8月27日 153次阅读 来源: 熊丸子

良久没有更新了，本日更一篇款式篇。

Polyermer运用的是Shadow DOM styling划定规矩来限制每一个自定义组件的款式局限（即每一个组件都能够定义本身内部自力的款式，而不受外界全局款式的滋扰）。怎样定义组件内部款式呢，我们须要在<dom-module>标签内运用<style>标签（1.1版本最先引荐与<template>平级）。

我们来看个例子
首先是自定义组件的代码

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="sub-element">
    <style>
        :host {
            display: block;
            border: 1px solid red;
        }
        
        #child-element {
            background: yellow;
        }
        
        .content-wrapper >::content .special {
            background: silver;
        }
    </style>
    <template>
        <div id="child-element">In local DOM!</div>
        <div class="content-wrapper">
            <content></content>
        </div>
    </template>
    <script>
        Polymer({
            is: 'sub-element'
        });
    </script>
</dom-module>

主index.html的代码

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="components/sub-element.html">
    <style>
        #child-element{
            background: green;
        }
    </style>
</head>
<body>
    <div id="child-element">native div of index page</div>
    <sub-element id="subElement">
        <div class="special">I'm content child of sub element</div>    
    </sub-element>
</body>
</html>

运转结果以下：
《开坑，写点Polymer 1.1 教程第6篇——款式（1）》
能够看到我们在主index.html里也定义了一个#child-element的全局款式，结果为背景绿色，然则这个我们在sub-element中的style设置里对这个款式举行了再次定义，所以终究衬着时会以自组建为先，掩盖父容器中的定义，或者是全局的款式定义。假如我们把sub-element中这个style解释掉，则子组件会运用外层的定义，显现为绿色。

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

《开坑，写点Polymer 1.1 教程第6篇——款式（1）》
我们接着看style中几个和以往传统写法不一样的处所,

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

:host 是对宿主子容器举行设定，你能够把它当做是<template></template>，或者是<sub-element></sub-element>

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

::content 是对被插进去的child标签举行设定，也就是途中灰色的<div class=”special”>I’m content child of sub element</div>

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

为何要让自定义组件的style有本身自力的作用域呢！原理实在请简朴，我们开辟一套体系平常都要定义全局一套主题，每一个控件的样色设想作风要一致一致，然则一旦我对某些组件举行了扩大，须要一些特别的款式设置，我们就能够在每一个自定义组件内部举行设置，而不须要损坏全局的css文件。
Polymer team如今以为::content的写法有些冗杂，会在后续版本中加以改进，我们也拭目以待

    原文作者：熊丸子
    原文地址: https://segmentfault.com/a/1190000003924945
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞