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或其他语言的类别相似,可以透过继承或是扩展来自其他类别的方式定义类别。
开发者可以运用现存经典的网页小工具,可以配置一系列事件处理程序,或是增加自定义的样式,甚至使用标记内部结构。开发者透过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具有非影子内容的时候,可以使用名为
Web Components的标准提供开发者一系列低阶功能,使其能以各种方式组合在一起,发展出预期之外的功能,像是现在Custom Elements已经被利用在建构VR内容,并产生多个使用者界面工具包。仅管标准制定过程很漫长,但是Web Components的翻新,带给开发者更多的开发利器。
