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

資訊專欄INFORMATION COLUMN

# 翻譯：Shadow DOM隔離釋義

xi4oh4o / 757人閱讀

摘要：使用的一個(gè)主要好處是樣式隔離。假設(shè)我們?nèi)匀皇褂脕?lái)掛接這個(gè)，如下所示請(qǐng)注意，元素位于模板元素內(nèi)部，并與一起克隆到內(nèi)。這允許在陰影根中定義的樣式規(guī)則作用域。封閉模式的設(shè)計(jì)目標(biāo)是禁止對(duì)來(lái)自外部世界的中的節(jié)點(diǎn)進(jìn)行任何訪問(wèn)。

使用shadow DOM的一個(gè)主要好處是樣式隔離。 要了解這意味著什么，讓我們來(lái)假設(shè)我們要?jiǎng)?chuàng)建自定義進(jìn)度條組件。 我們可以使用兩個(gè)嵌套的DIV來(lái)顯示條形，使用另一個(gè)DIV來(lái)顯示文本以顯示百分比，如下所示：

請(qǐng)注意模板元素的使用:

它允許作者包含HTML片段，以后可以通過(guò)克隆內(nèi)容來(lái)實(shí)例化

模板元素可以出現(xiàn)在文檔中的任何位置（例如，在表格和tr元素之間）

模板元素中的內(nèi)容是惰性的，不運(yùn)行腳本或加載圖像和其他類型的子資源。

這個(gè)進(jìn)度條實(shí)現(xiàn)的問(wèn)題是它的兩個(gè)內(nèi)部div可以被用戶自由訪問(wèn)，它的樣式規(guī)則也不局限于進(jìn)度條。 例如，為進(jìn)度條定義的樣式規(guī)則將應(yīng)用于進(jìn)度條外部的內(nèi)容，其類名為progress：


    
Pending an approval

同樣的，為其他元素定義的樣式規(guī)則可以覆蓋進(jìn)度條中的規(guī)則：

雖然我們可以通過(guò)使用自定義元素名稱（如custom-progressbar）來(lái)規(guī)范規(guī)則，然后通過(guò)以下方式初始化所有其他屬性來(lái)解決這些問(wèn)題

all: initial

但Shadow DOM提供了更優(yōu)雅的解決方案，外部div處引入封裝層，以便進(jìn)度條組件的用戶看不到其內(nèi)部實(shí)現(xiàn)（例如為標(biāo)簽和條創(chuàng)建的div）。還有為進(jìn)度條定義的CSS樣式不會(huì)干擾頁(yè)面的其余部分，反之亦然。 為此，我們首先通過(guò)調(diào)用在進(jìn)度條上創(chuàng)建一個(gè)ShadowRoot：

attachShadow({mode: "closed"})

然后在其下附加其實(shí)現(xiàn)所需的各種DOM實(shí)現(xiàn)。 假設(shè)我們?nèi)匀皇褂胐iv來(lái)掛接這個(gè)Shadow Root，如下所示：

請(qǐng)注意，style元素位于模板元素內(nèi)部，并與div一起克隆到Shadow Root內(nèi)。這允許在陰影根中定義的樣式規(guī)則作用域。 在陰影根之外定義的樣式規(guī)則就無(wú)法適用于Shadow Root內(nèi)的元素。

使用打開(kāi)模式，您可以通過(guò)HTML元素的shadowRoot屬性訪問(wèn)Shadow DOM。關(guān)閉模式你不能。 shadowRoot將返回null。封閉模式的設(shè)計(jì)目標(biāo)是禁止對(duì)來(lái)自外部世界的Shadow Root中的節(jié)點(diǎn)進(jìn)行任何訪問(wèn)。

翻譯來(lái)自：

Introducing Slot-Based Shadow DOM API | WebKit

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

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

相關(guān)文章

  • Web Components 是個(gè)什么樣的東西

    摘要：生命周期和回調(diào)在這個(gè)的基礎(chǔ)上，標(biāo)準(zhǔn)提供了一系列控制自定義元素的方法。生命周期和自定義元素標(biāo)簽的保持一致。否則，這個(gè)屬性會(huì)返回一個(gè)表示引入的文件的文檔對(duì)象，類似于。相關(guān)的東西不多，而且它現(xiàn)在已經(jīng)是納入生效的標(biāo)準(zhǔn)文檔中了。 前端組件化這個(gè)主題相關(guān)的內(nèi)容已經(jīng)火了很久很久，angular 剛出來(lái)時(shí)的 Directive 到 angular2 的 components，還有 React 的 co...

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

  • Web Components 是個(gè)什么樣的東西

    摘要：生命周期和回調(diào)在這個(gè)的基礎(chǔ)上，標(biāo)準(zhǔn)提供了一系列控制自定義元素的方法。生命周期和自定義元素標(biāo)簽的保持一致。否則，這個(gè)屬性會(huì)返回一個(gè)表示引入的文件的文檔對(duì)象，類似于。相關(guān)的東西不多，而且它現(xiàn)在已經(jīng)是納入生效的標(biāo)準(zhǔn)文檔中了。 前端組件化這個(gè)主題相關(guān)的內(nèi)容已經(jīng)火了很久很久，angular 剛出來(lái)時(shí)的 Directive 到 angular2 的 components，還有 React 的 co...

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

  • Web Components 是個(gè)什么樣的東西

    摘要：生命周期和回調(diào)在這個(gè)的基礎(chǔ)上，標(biāo)準(zhǔn)提供了一系列控制自定義元素的方法。生命周期和自定義元素標(biāo)簽的保持一致。否則，這個(gè)屬性會(huì)返回一個(gè)表示引入的文件的文檔對(duì)象，類似于。相關(guān)的東西不多，而且它現(xiàn)在已經(jīng)是納入生效的標(biāo)準(zhǔn)文檔中了。 前端組件化這個(gè)主題相關(guān)的內(nèi)容已經(jīng)火了很久很久，angular 剛出來(lái)時(shí)的 Directive 到 angular2 的 components，還有 React 的 co...

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

  • # Web Components 全攬

    摘要：定制元素可以在原生元素外創(chuàng)建定制元素。此定制元素內(nèi)部有一個(gè)加號(hào)按鈕，一個(gè)減號(hào)按鈕，一個(gè)顯示當(dāng)前值。此主題會(huì)在下一部分內(nèi)介紹。定制元素的屬性元素的屬性被稱為，對(duì)象內(nèi)的屬性被稱為。做響應(yīng)的同步處理。 Web Components 全攬 Web Components技術(shù)可以把一組相關(guān)的HTML、JS代碼和CSS風(fēng)格打包成為一個(gè)自包含的組件，只要使用大家熟悉的標(biāo)簽即可引入此組件。Web Com...

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

  • 可能是你見(jiàn)過(guò)最完善的微前端解決方案

    摘要：而從技術(shù)實(shí)現(xiàn)角度，微前端架構(gòu)解決方案大概分為兩類場(chǎng)景單實(shí)例即同一時(shí)刻，只有一個(gè)子應(yīng)用被展示，子應(yīng)用具備一個(gè)完整的應(yīng)用生命周期。為了解決產(chǎn)品研發(fā)之間各種耦合的問(wèn)題，大部分企業(yè)也都會(huì)有自己的解決方案。 原文鏈接：https://zhuanlan.zhihu.com/p/... Techniques, strategies and recipes for building a modern ...

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

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

0條評(píng)論

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