Web元件標準再翻新，Firefox 63先支援Custom Elements與Shadow DOM，要讓網頁程式有更多低階元件可用

在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的翻新，帶給開發者更多的開發利器。