什么是 Web Components
Web Components 是一种用于构建可重用的定制元素的技术，这种技术被称为 Web Components，并已成为 Web 平台的一部分。它包括 Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports 四个主要技术。
Custom Elements 允许开发人员创建自定义 HTML 元素，而 Shadow DOM 则允许开发人员将元素的 DOM 树保护起来，从而使其和文档主体相隔离。HTML Templates 允许开发人员定义重复的块，并在需要时将其实例化。HTML Imports 则允许开发人员在一个 HTML 文件中导入另一个 HTML 文件。
Web Components 技术可以实现模块化开发，易于扩展，降低代码的耦合度，提高项目维护性。
为什么需要 Web Components
在开发 Web 应用程序时，我们经常需要创建自定义元素来实现特定的功能，例如日历、图表、下拉菜单等等，这些自定义元素可以减少代码的重复性，提高代码的可维护性和复用性。
不幸的是，HTML 本身缺乏将这些自定义元素封装成可重用组件的能力，这就导致了复杂的 DOM 操作和样式冲突。这也是 Web Components 技术被开发出来的原因。
使用 Web Components 技术，我们可以创建自定义元素，这些自定义元素可以包含独立的 JS、CSS 和 HTML 片段，从而实现更好的封装性和可重用性。
为什么使用 Polymer
Polymer 是一个 Web Components 库，它提供了许多有用的组件和工具，帮助开发人员更容易地构建自定义元素。
Polymer 采用了三种组件：自定义元素、Shadow DOM 和 HTML Templates。它还提供了其他一些有用的功能，例如双向数据绑定、模板绑定、DOM 操作等等。
下面是一些使用 Polymer 的示例。
创建自定义元素
下面是一个基本的自定义元素例子：
-- -------------------- ---- -------
----------- ----------------
----------
--------- -----------
-----------
--------
---------
--- ------------
---
---------
-------------这里创建了一个名为 my-element 的自定义元素，这个元素只包含一个标题 Hello World!。
包含子元素
可以通过 Polymer 提供的 content 元素来包含子元素，如下所示：
-- -------------------- ---- -------
----------- ----------------
----------
--------- -----------
-------------------
-----------
--------
---------
--- ------------
---
---------
-------------这里在模板中添加了一个 content 元素，它允许在自定义元素中填充其他子元素，例如：
<my-element> <p>How are you?</p> </my-element>
这个会输出一个标题 Hello World! 和一个段落 How are you?。
双向数据绑定
Polymer 还提供了一种方便的双向数据绑定方式，即使用 iron-input 元素，如下所示：
-- -------------------- ---- -------
----------- ----------------
----------
----------- -----------------------
------ ------------
-------------
-----------
--------
---------
--- -------------
----------- -
------ -
----- -------
------ ------ -------
-
-
---
---------
-------------这里创建了一个包含一个输入框的自定义元素，用户输入的值可以通过 bind-value 属性绑定到 value 属性上，双向数据绑定使得两者之间的关系保持同步。
事件和方法
Polymer 元素也可以触发事件和调用方法，如下所示：
-- -------------------- ---- -------
----------- ----------------
----------
------- ---------------------------- ------------
-----------
--------
---------
--- -------------
------------ ---------- -
------------------------
--
---
---------
-------------这里创建了一个包含一个按钮的自定义元素，当用户单击此按钮时，将调用 handleClick 方法，并在浏览器控制台中打印出 Clicked!。
总结
Web Components 是一种用于构建可重用元素的技术，可以减少代码的重复性，提高项目维护性和复用性。Polymer 是一个 Web Components 库，它提供了许多有用的组件和工具，帮助开发人员更容易地构建自定义元素。使用 Polymer 可以创建自定义元素、包含子元素、进行双向数据绑定、触发事件和调用方法等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664d483dd3423812e4c83c77