Polymer 库是一个由 Google 推出的 Web 组件库，它能够帮助开发者快速构建符合 Web Components 规范的组件。而 Web Components，也就是 W3C 的一项技术规范，允许开发者创建定制化的用户界面组件。因此，Polymer 库的出现为使用 Web Components 技术的前端开发提供了巨大的便利。
构建简单的组件
使用 Polymer 库构建 Web 组件非常简单。首先，我们需要定义一个继承自 Polymer.Element 的自定义元素，这个元素包含了我们定义组件所需的行为和样式。
-- -------------------- ---- -------
----------- ----------------
----------
-------
----- -
-------- ------
-------- -----
----------------- ----------
-
--------
---------- -----------
-----------
--------
----- --------- ------- --------------- -
------ --- ---- - ------ ------------- -
-
----------------------------------- -----------
---------
-------------在上面的代码中，我们定义了一个名为 my-element 的自定义元素。注意，在模板中，我们使用了类似 CSS 的方式定义了组件的样式。此外，定义了 MyElement 类并调用 customElements.define 方法注册元素。
现在，我们可以在 HTML 中使用这个自定义元素了：
<my-element></my-element>
组件之间的通信
在实际的开发中，组件之间常常需要进行通信。比如，当点击一个按钮时，我们需要通知其他组件进行相应的操作。在 Polymer 库中，我们可以使用事件机制实现组件之间的通信。
-- -------------------- ---- -------
----------- ---------------------
----------
-------
----- -
-------- ------
-------- -----
----------------- ----------
-
--------
----------- ---------------
------- ------------------------------- -----------
-----------
--------
----- -------------- ------- --------------- -
------ --- ---- - ------ ------------------ -
------ --- ------------ -
------ -
------ -
----- -------
------ -
-
--
-
---------------- -
-------------
---------------------- ---------------------------- -------- --------------
-
-
---------------------------------------- ----------------
---------
-------------
----------- --------------------
----------
-------
----- -
-------- ------
-------- -----
----------------- ----------
-
--------
----------- ------- ------ ---------------------
-----------
--------
----- ------------- ------- --------------- -
------ --- ---- - ------ ----------------- -
------ --- ------------ -
------ -
------------ -
----- -------
------ -
-
--
-
------------------- -
--------------------------
---------------------------------------- ---------------------------------
-
---------------------- -
-----------------------------
------------------------------------------- ---------------------------------
-
---------------------- -
---------------- - -------------
-
-
--------------------------------------- ---------------
---------
-------------在上面的代码中，我们定义了两个组件：counter-element 和 target-element。当我们在 counter-element 中点击按钮时，它会触发一个自定义事件 count-changed，并将当前的计数值作为 detail 属性传递。在 target-element 中，当它监听到 count-changed 事件时就会更新自己的计数值。
总结
使用 Polymer 库构建符合 Web Components 规范的组件非常简单。我们可以定义自己的元素，并在其中使用 HTML、CSS 和 JavaScript 实现一些行为。同时，Polymer 库也提供了丰富的 API，帮助我们更加方便地进行组件开发和组件之间的通信。作为一个前端开发者，掌握 Polymer 库的使用对于构建高质量的 Web 应用程序至关重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6519517f95b1f8cacd17efb3