在2014年提出的Web Components標準,2018年翻新釋出Web Components 1,該標準會在各大主流瀏覽器支援實作,Mozilla提到,他們在最新版的Firefox 63中實作了兩個重要的標準,分別為Custom Elements以及Shadow DOM

在網頁應用程式中,使用第三方元件可以加速網頁開發的工作,但同時也會帶來不少問題,需要承擔使用他人程式碼,可能發生的JavaScript或CSS衝突,雖然這個問題在React或是其他現代框架已經改善不少,但Mozilla提到,要重複使用部分小元件的成本仍然很高。在HTML5中增加了一些新元素,為網頁平臺添加常用UI小工具(Widgets),但是為每一個常用的網頁使用者介面模式增加新的標準元素,並非一個長久之道。

為了解決這個問題,出現了一些網路標準草稿,每一個標準都有一些獨立的工具程式,當共同使用這些工具程式時,便能實現之前無法原生建構的東西,而且難以偽造。這些標準被稱為Web Components,雖然早在2014年就出現,而且Chrome也以某種形式實作了, 但經過一段時間的發展後,Web Components已經發展出更為成熟的版本,並且被賦予了版本號,從原本的Web Components 0前進到Web Components 1。

Mozilla在Firefox 63中,實作了Web Components 1中兩個重要的標準Custom Elements和Shadow DOM。Mozilla表示,Custom Elements是Web Components標準的典型代表,允許開發人員定義客製化的HTML元素。而這使用方式和JavaScript或其他語言的類別相似,可以透過繼承或是擴展來自其他類別的方式定義類別。

開發者可以運用現存經典的網頁小工具,可以配置一系列事件處理程序,或是增加自定義的樣式,甚至使用<template>標記內部結構。開發者透過HTML樣板、DOM呼叫或是其他框架,就能在自己的程式碼中,使用他人的Custom Elements,框架只要在其虛擬DOM實作中支援自定義標籤名稱就可以了,也由於介面是標準DOM介面,因此Custom Elements能用於真正的可移植小工具。

另一個在Firefox 63中新增的Web Components是Shadow DOM,這是用來解決自定義的元素,與其他CSS程式碼發生衝突的問題,Shadow DOM標準引入了影子根(Shadow Root)的概念,從表面上看起來,影子根有標準的DOM方法,並且可以附加在任何的DOM節點,但Shadow DOM的內容不會出現在父節點的檔案中,用傳統的DOM方法無法看到,而且就連包含頁面的樣式也看不到。

當Custom Elements具有非影子內容的時候,可以使用名為<slot>的特殊新元素,使其共同良好的協作。影子根和非影子內容相結合,讓開發者有能力創建複雜結構的豐富自定義元素。

Web Components的標準提供開發者一系列低階功能,使其能以各種方式組合在一起,發展出預期之外的功能,像是現在Custom Elements已經被利用在建構VR內容,並產生多個使用者介面工具包。僅管標準制定過程很漫長,但是Web Components的翻新,帶給開發者更多的開發利器。


Advertisement

更多 iThome相關內容