简介
Web Components 是 Web 平台上的一种新型技术，它能够帮助开发者创建可重用、可组合、跨框架、跨浏览器的 UI 组件。Web Components 目前分为四个部分：
- Custom Elements：自定义元素
- Shadow DOM：影子 DOM
- HTML Templates：HTML 模板
- HTML Imports：HTML 导入
Polymer 是 Google 支持的一个 JavaScript 框架，它采用 Web Components 的标准和规范，提供了一些工具和库来帮助开发者更容易地创建 Web Components。本文将介绍如何使用 Polymer 构建高级 Web Components。
用 Polymer 创建 Custom Elements
Custom Elements 允许开发者创建自定义 HTML 元素，这些元素支持自定义行为和样式。使用 Polymer 创建 Custom Elements 非常简单，只需使用 Polymer 的 Polymer() 构造函数，然后定义一些属性和方法即可。以下是一个简单的例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ -------------
------- ----------------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------
------- --------------
------ - --------------- ---- - ---- --------------------------------------------------------
----- ---------- ------- -------------- -
------ --- ---------- -
------ -----
--------- ----------
--
-
-
------------------------------------ ------------
---------
-------
------
---------------------------
-------
-------可以看到，定义 Custom Elements 非常方便，只需要继承 PolymerElement 类并实现 static get template() 方法即可。在模板中，使用了 html 标签来定义模板。
用 Polymer 创建 Shadow DOM
Shadow DOM 是 Web Components 的一部分，它允许开发者创建具有独立作用域的 DOM 树。Polymer 为创建 Shadow DOM 提供了工具和库，可以使用 Polymer.ShadowDom 来创建 Shadow DOM。以下是一个简单的例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ -------------
------- ----------------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------
------- --------------
------ - --------------- ---- - ---- --------------------------------------------------------
------ ----------------------------------------------
------ - --------- - ---- -------------------------------------------
----- ---------- ------- -------------- -
------ --- ---------- -
------ -----
--------- ----------
--
-
------------------- -
--------------------------
--------------------- ------
-
-
------------------------------------ ------------
---------
-------
------
---------------------------
-------
-------可以看到，使用 Shadow DOM 非常简单，只需要使用 Polymer.ShadowDom.addTo() 方法来为元素添加 Shadow DOM。
用 Polymer 创建 HTML Templates
HTML Templates 是 Web Components 的一部分，它允许开发者创建可重用的 HTML 片段。Polymer 为创建 HTML Templates 提供了工具和库，可以使用 Polymer.Templatize 来创建 HTML Templates。以下是一个简单的例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ---------------
------- ----------------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------
------- --------------
------ - --------------- ---- - ---- --------------------------------------------------------
------ ----------------------------------
------ - ---------- - ---- -------------------------------------------
----- ---------- ------- -------------- -
------ --- ---------- -
------ -----
------------------
---------- ---------- -- --- ----------
----------
------- ---------- ------------
-----------
------------
--
-
------ --- ------------ -
------ -
------ -
----- -------
------ --------- --------
-
--
-
------------- -
--------
--------------- - -------------------------------------------
-
------------------- -
--------------------------
-------------------
-
------------- -
----- -------- - ----------------------------------
--- ---- - - -- - - --- ---- -
----- ---- - - ------ -- ----- ----- ----- --
----- ----- - ----------------------------
---------------------------------
-
--------------------------------------------
-
-
------------------------------------ ------------
---------
-------
------
---------------------------
---- --------------------------
--------- ------------------
------- ---------- ------------
-----------
-------
-------可以看到，使用 HTML Templates 需要用到 Templatize 工具和 template 标签。在模板中，使用了 iron-list 元素和 as 属性来绑定数据。
用 Polymer 创建 HTML Imports
HTML Imports 是 Web Components 的一部分，它允许开发者导入 HTML 文件。Polymer 为创建 HTML Imports 提供了工具和库，可以使用 Polymer.html.importHref() 来导入 HTML 文件。以下是一个简单的例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------------
------- ----------------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------
------- --------------
------ - --------------- ---- - ---- --------------------------------------------------------
----- ---------- ------- -------------- -
------ --- ---------- -
------ -----
------------------
------------------
--
-
------ --- ------------ -
------ -
------ -
----- -------
------ ------- --------
--
-------- -
----- -------
------ ----- ---- -- -------- ---- ------- ------
-
--
-
------------------- -
--------------------------
----------------------------------------------
-
-
------------------------------------- ------------
---------
-------
------
-----------------------------
-------
-------可以看到，使用 HTML Imports 非常简单，只需要使用 Polymer.html.importHref() 方法来导入 HTML 文件即可。
总结
在本文中，我们了解了如何使用 Polymer 创建高级 Web Components。我们学习了如何使用 Polymer 创建 Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports，并给出了相应的代码示例。这将有助于开发者更好地利用 Web Components 技术，构建更加灵活和可重用的 UI 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455eedb968c7c53b0944de9