什么是 Web Components？
Web Components 是一套开放式的 Web 标准规范，旨在为 Web 开发人员提供一组用于创建可重用、适应性强和灵活性高的定制元素的工具。Web Components 涵盖了 Custom Elements、Shadow DOM 和 HTML Templates 等三个主要部分，其中 Custom Elements 是最重要的一个部分，它可以让开发人员创建出自定义的 HTML 标签，可以完全按照自己的意愿来构建并控制这些标签的行为特性。
Web Components 在移动端 Web APP 中的应用
移动端 WEB APP 与桌面浏览器的本质区别，是它的交互速度及稳定性要求更高。WEB APP 常常需要借助一些框架和库来实现更好的效果。但框架和库会增加代码体积，导致页面加载速度越来越慢。Web Components 通过 HTML 标准来创建组件，使用前端相关技术进行组件实现，这个过程仅仅是模块化的组件化，无需费时费力做冗余的技术选型和组件调整。Web Components 可以嵌入到其它框架或库中，而不会增加代码难度。Web Components 的组件化开发，使得维护和开发都变得更加容易。
示例代码
下面是一个简单的圆形进度条组件的示例。
定义一个 custom element：
-- -------------------- ---- -------
--------- --------------
-------
----- -
-------- ------
------ --------------------------- ------
------- --------------------------- ------
--------- ---------
--------- -------
-
--- -
--------- ---------
---- ----
----- ----
---------- --------------- ----- ---------------
-
------ -
------- ---------------------------- ---------
------------- ----
--------------- ------
----- ------------
-
----- -
--------- ---------
---- ----
----- ----
---------- --------------- ------
------------ -------
---------- -----
-
--------
---- ------------ ------------- ---------- - -- ----
------- ---------- ------- ------- ------ --
------- ---------------- ------- ------- ------ --
------
---- ----------------------
-----------
--------
----- -------------- ------- ----------- -
------------- -
--------
--------
----- ---- - ------------------------------------
------------------- ----- ------ ---------------------------------------------
-
------ --- -------------------- -
------ ----------
-
------------------------------ ------- ------- -
-- ----- --- -------- -
-------------------------------
-
-
------------------- -
---------------------------------------------------
-
-------------- -
--- - ---------- - - - ----
--- - ---------------------- --- -----
----- -------- - -------------------------------------------
----- ---- - ---------------------------------------
------------------------------ - ------ - ---- - ---- -----
-------------- - ----------
-
-
---------------------------------------- ----------------
---------在 HTML 中使用 custom element：
<circle-progress value="30"></circle-progress>
效果如下：
总结
Web Components 可以支持移动端 Web APP 更快的轻量级开发，能减少因使用框架或库而产生的前端代码冗余。同时，Web Components 提供了一种新的 Web 开发方式，有利于围绕组件化和非侵入式和可重用组件进行开发。Web Components 在移动端 Web APP 中的应用虽然还不算普及，但完全可以作为更好的开发方式引入到项目中，对提高开发效率、加快页面交互速度等方面都能产生积极的影响。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5dbc7f6b2d6eab31578fd