開坑，寫點Polymer 1.1 教程第6篇——樣式（1）

skinner 發布于2019-08-21 10:44 / 1226人閱讀

摘要：好久沒有更新了，今天更一篇樣式篇。使用的是規則來限定每個自定義組件的樣式范圍即每個組件都可以定義自己內部獨立的樣式，而不受外界全局樣式的干擾。現在覺得的寫法有些冗長，會在后續版本中加以改進，我們也拭目以待

好久沒有更新了，今天更一篇樣式篇。

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篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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