polymer1.0 樣式

時間 2019-11-16

標籤 polymer1.0 polymer 樣式简体版

原文原文鏈接

Polyermer使用的是Shadow DOM styling規則來限定每一個自定義組件的樣式範圍（即每一個組件均可以定義本身內部獨立的樣式，而不受外界全局樣式的干擾）。如何定義組件內部樣式呢，咱們須要在<dom-module>標籤內使用<style>標籤（1.1版本開始推薦與<template>平級）。css

咱們來看個例子
首先是自定義組件的代碼html

<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的代碼web

<!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>

運行結果以下：

能夠看到咱們在主index.html裏也定義了一個#child-element的全局樣式，效果爲背景綠色，可是這個咱們在sub-element中的style設置裏對這個樣式進行了再次定義，因此最終渲染時會以自組建爲先，覆蓋父容器中的定義，或者是全局的樣式定義。若是咱們把sub-element中這個style註釋掉，則子組件會使用外層的定義，顯示爲綠色。app

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

咱們接着看style中幾個和以往傳統寫法不同的地方,dom

: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的寫法有些冗長，會在後續版本中加以改進，咱們也拭目以待code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。