成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

開坑，寫點(diǎn)Polymer 1.1 教程第6篇——樣式（1）

skinner / 1233人閱讀

摘要：好久沒(méi)有更新了，今天更一篇樣式篇。使用的是規(guī)則來(lái)限定每個(gè)自定義組件的樣式范圍即每個(gè)組件都可以定義自己內(nèi)部獨(dú)立的樣式，而不受外界全局樣式的干擾?，F(xiàn)在覺(jué)得的寫法有些冗長(zhǎng)，會(huì)在后續(xù)版本中加以改進(jìn)，我們也拭目以待

好久沒(méi)有更新了，今天更一篇樣式篇。

Polyermer使用的是Shadow DOM styling規(guī)則來(lái)限定每個(gè)自定義組件的樣式范圍（即每個(gè)組件都可以定義自己內(nèi)部獨(dú)立的樣式，而不受外界全局樣式的干擾）。如何定義組件內(nèi)部樣式呢，我們需要在標(biāo)簽內(nèi)使用

主index.html的代碼




    
    
    


    
native div of index page

    
        
I"m content child of sub element

運(yùn)行結(jié)果如下：

可以看到我們?cè)谥鱥ndex.html里也定義了一個(gè)#child-element的全局樣式，效果為背景綠色，但是這個(gè)我們?cè)趕ub-element中的style設(shè)置里對(duì)這個(gè)樣式進(jìn)行了再次定義，所以最終渲染時(shí)會(huì)以自組建為先，覆蓋父容器中的定義，或者是全局的樣式定義。如果我們把sub-element中這個(gè)style注釋掉，則子組件會(huì)使用外層的定義，顯示為綠色。

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


我們接著看style中幾個(gè)和以往傳統(tǒng)寫法不一樣的地方,

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

:host 是對(duì)宿主子容器進(jìn)行設(shè)定，你可以把它當(dāng)成是，或者是

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

::content 是對(duì)被插入的child標(biāo)簽進(jìn)行設(shè)定，也就是途中灰色的

I"m content child of sub element

.content-wrapper >::content .special
---->最終會(huì)被翻譯成
.content-wrapper >.special

為什么要讓自定義組件的style有自己獨(dú)立的作用域呢！道理其實(shí)請(qǐng)簡(jiǎn)單，我們開發(fā)一套系統(tǒng)一般都要定義全局一套主題，每個(gè)控件的樣色設(shè)計(jì)風(fēng)格要統(tǒng)一一致，但是一旦我對(duì)某些組件進(jìn)行了擴(kuò)展，需要一些特殊的樣式設(shè)置，我們就可以在每個(gè)自定義組件內(nèi)部進(jìn)行設(shè)置，而不需要破壞全局的css文件。
Polymer team現(xiàn)在覺(jué)得::content的寫法有些冗長(zhǎng)，會(huì)在后續(xù)版本中加以改進(jìn)，我們也拭目以待

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86092.html

相關(guān)文章

  • 開坑，寫點(diǎn)Polymer 1.1 教程第6篇——樣式（3）

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

    Crazy_Coder 評(píng)論0 收藏0

  • 開坑，寫點(diǎn)Polymer 1.1 教程第6篇——樣式（2）

    摘要：樣式不會(huì)被上層的組件介入影響，更不會(huì)被內(nèi)層組件影響。這對(duì)保護(hù)樣式不受未知的，不可控的外界因素所干擾非常有用。形式上感覺(jué)就是這個(gè)自定義的變量稱為一個(gè)新的屬性，可以被賦值正如我們小標(biāo)題上的稱呼自定義屬性。 前言 已經(jīng)好久沒(méi)有更新Polymer專欄，之前幾個(gè)月由于受到工作上的突然變故，導(dǎo)致學(xué)習(xí)和撰寫無(wú)法順利開展，好在目前各方面都已經(jīng)暫時(shí)穩(wěn)定下來(lái)，期間有不少對(duì)Polymer感興趣的壇友通過(guò)評(píng)論...

    EdwardUp 評(píng)論0 收藏0

  • 開坑，寫點(diǎn)Polymer 1.0 教程第1篇——安裝篇

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

    Jeff 評(píng)論0 收藏0

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

    摘要：組件也一樣，從被創(chuàng)建，被解析，被賦初始化值，被添加到舞臺(tái)，被繪制，被布局，使用過(guò)程中被修改了值，被重繪，被重新布局，最終被父組件移除結(jié)束慘淡的一身等等，都可以稱為組件的生命周期。 這篇來(lái)談?wù)刾olymer最核心的一塊，也可以說(shuō)是web components技術(shù)最最核心的一塊內(nèi)容 生命周期，大家在學(xué)習(xí)一些框架的時(shí)候最好都去了解一下它們的生命周期。 什么是生命周期 什么是生命周期？故名思議...

    Dionysus_go 評(píng)論0 收藏0

  • 開坑，寫點(diǎn)Polymer 1.0 教程第3篇——組件注冊(cè)與創(chuàng)建

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

    joywek 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<