国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

EdwardUp / 3471人閱讀

摘要：樣式不會被上層的組件介入影響，更不會被內層組件影響。這對保護樣式不受未知的，不可控的外界因素所干擾非常有用。形式上感覺就是這個自定義的變量稱為一個新的屬性，可以被賦值正如我們小標題上的稱呼自定義屬性。

前言

已經好久沒有更新Polymer專欄，之前幾個月由于受到工作上的突然變故，導致學習和撰寫無法順利開展，好在目前各方面都已經暫時穩定下來，期間有不少對Polymer感興趣的壇友通過評論或者私信的形式向我表達了不要斷更的期望，我在這里也想對他們說聲謝謝。

今天我們繼續Polymer的樣式篇，剛剛在新機器下部署好了Polymer的開發環境，發現時隔2個月Polymer已然悄悄升級到了1.3版本（雖然我還沒去了解新版本的變更），這也說明了Google對這個框架的重視程度，給我們學習Polymer的朋友們打了一針強心劑。（建議大家在閱讀本文前執行bower update命令來更新Polymer到最新版）

正題 跨作用域的樣式 背景

對于Webcomponent而言，Shadow Dom 帶來了很多作用域以及樣式封裝之類的好處，使得組件在CSS影響范圍上變得更加安全和簡單。樣式不會被上層的組件介入影響，更不會被內層組件影響。

這對保護樣式不受未知的，不可控的外界因素所干擾非常有用。但是當你想要刻意去修改一個自定義組件的樣式時該怎么辦？我們經常要面臨這個問題，比如在某個固定的主題（theme）下做一些針對某些組件的特殊的樣式修改。舉個例子，“custom-checkbox”組件使用 .checked這個class，而另外一個component也碰巧使用了.checked 這個class的時候Polymer提供的Shadow Style功能就很好的解決了同名class相互影響，相互污染的問題。

為了解決污染的問題傳統的做法往往是，給css定義加上很多前綴，之前加上很多dom層級的定義（類似于namespace）來區分重名的class，而有了Shadow Style之后，媽媽就再也不擔心class重名了。

自定義CSS屬性（或者稱為變量更加合適）

我們先來看一段代碼，定義一個component

我們可以看到span上的className為title,而titile的定義里出現了奇怪的東西var (xxxxxx)

.title{
    color: var(--my-toolbar-title-color);
}

我們望文生義一下，從字面上理解這個color應該是個動態的值，具體顏色一定是由外部使用這個component的父component來決定的，而--my-toolbar-title-color應該就是一個變量名，存放外部傳入的具體顏色值。
接下去我們再定義一個父component來使用這個my-toolbar


運行結果一目了然，my-toolbar這個component中定義的css變量可以被外部使用它的my-element這個父component賦值。形式上感覺就是--my-toolbar-title-color這個自定義的變量稱為一個新的css屬性，可以被賦值（正如我們小標題上的稱呼—— 自定義css屬性）。

當然你也可以給var --my-toobar-title-color一個默認的初始值，以防外界沒有給它賦值，如

color: var(--my-toolbar-title-color, blue);

這種自定義css屬性，對于擴展我們傳統的樣式十分有幫助，尤其是切換不同配色的主題時，目前Firefox已經原生支持這種寫法，chrome和safari也已經宣稱要支持這一特性，鼓掌！

自定義CSS代碼塊

了解過sass的朋友應該對@mixin不陌生，polymer也提供了整塊整塊定義css樣式的功能，先看代碼，我們對之前的my-toolbar的代碼稍作改動，使用@apply來聲明了2個變量接收mixin的樣式塊。

之后對my-element也做一下修改

運行結果

我們可以看到@apply和之前的var作用其實是類似的，只不過@apply定義的變量接收的是由多條style規則組成的塊。

好了，夜已深，可能講完整個style章節需要總共4-5個小節，今天第2小節就講到到這里吧，我盡量抽時間寫完。

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78757.html

相關文章

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

    摘要：為嘛會這樣呢，動態添加就不需要手動刷新，而動態設置自定義屬性就需要我猜測可能的原因是如果用戶同時設置多個自定義屬性，比如這樣如果讓自動去刷新視圖可能就要執行次，用戶手動自己在最后一次性刷新的話能提升一定的性能。 一些和自定義css屬性有關的API上篇中我們介紹了如何自定義css變量，從而在外部定義一些具體的值，由外部component傳入子component后動態的改變，子compon...

    Crazy_Coder 評論0 收藏0

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

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

    skinner 評論0 收藏0

  • 開坑，寫點Polymer 1.0 教程第4篇——組件的生命周期

    摘要：組件也一樣，從被創建，被解析，被賦初始化值，被添加到舞臺，被繪制，被布局，使用過程中被修改了值，被重繪，被重新布局，最終被父組件移除結束慘淡的一身等等，都可以稱為組件的生命周期。 這篇來談談polymer最核心的一塊，也可以說是web components技術最最核心的一塊內容 生命周期，大家在學習一些框架的時候最好都去了解一下它們的生命周期。 什么是生命周期 什么是生命周期？故名思議...

    Dionysus_go 評論0 收藏0

  • 開坑，寫點Polymer 1.0 教程第1篇——安裝篇

    摘要：所以又以一個庫的身份出現在世人面前，它現階段要做的就是使用的規范來進行開發，并且提供了一套底層實現來填補了各大瀏覽器暫不支持的，我們稱為填充物也就是要干的事情。 書接上回上一篇我們介紹了神馬是Polymer，這一篇我們來做些正式編碼前的準備工作，順便也扯一扯Polymer的真面目 如何安裝Polymer 有兩種方式：第一種是bower安裝，不要問我bower是什么，不會bower的話，...

    Jeff 評論0 收藏0

  • 開坑，寫點Polymer 1.0 教程第3篇——組件注冊與創建

    摘要：我們修改下例子定義借口，構造時將重新賦值測試一下這種構造函數傳參的方式只適用于，的創建方式，而且它種方式不支持，原因你自己拍腦袋想想就懂了。 之前一篇算是帶大家大致領略了一下Polymer的風采。這篇我們稍微深入一丟丟，講下組件的注冊和創建。 創建自定義組件的幾種方式 這里我們使用Polymer函數注冊了一個自定義組件my-element // register an element ...

    joywek 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<