Polymer 是一个基于 Web Components 标准的前端框架，它提供了一种方便的方式来创建自定义元素和组件。在 Polymer 中，自定义元素是通过定义一个继承自 Polymer.Element 的类来实现的。在这篇文章中，我们将会介绍如何在 Polymer 中使用自定义元素的模板和模块。
模板
在 Polymer 中，自定义元素的模板是通过定义一个名为 template 的静态属性来实现的。这个属性可以是一个 HTML 字符串，也可以是一个 HTML 元素。下面是一个简单的例子：
-- -------------------- ---- -------
----- --------- ------- --------------- -
------ --- ---------- -
------ -
-------
----- -
-------- ------
----------------- --------
-------- -----
-
--------
--------- -----------
------- -- -- ------ ------------
--
-
-
----------------------------------- -----------在这个例子中，我们定义了一个名为 MyElement 的自定义元素，并在它的模板中添加了一个样式和一些 HTML 内容。注意，在模板中使用的样式是通过 CSS 的 ":host" 伪类来定义的，这个伪类表示的是自定义元素本身。
模块
在 Polymer 中，自定义元素的模块是通过定义一个名为 properties 的静态属性来实现的。这个属性是一个对象，用于定义自定义元素的属性和它们的默认值。下面是一个例子：
-- -------------------- ---- -------
----- --------- ------- --------------- -
------ --- ---------- -
------ -
-------
----- -
-------- ------
----------------- --------
-------- -----
-
--------
---------- --------------
------- -- -- ------ ------------
--
-
------ --- ------------ -
------ -
----- -
----- -------
------ -------
-
--
-
-
----------------------------------- -----------在这个例子中，我们定义了一个名为 name 的属性，并设置了它的默认值为 "World"。在模板中，我们使用了双括号语法来插值这个属性的值。
除了定义属性的类型和默认值之外，我们还可以定义一些其他的选项，例如：
- reflectToAttribute：是否将属性值反射到自定义元素的属性中。
- observer：当属性值发生变化时调用的回调函数。
- computed：一个计算属性，它的值是根据其他属性计算得出的。
示例代码
下面是一个完整的示例代码，它演示了如何在 Polymer 中使用自定义元素的模板和模块：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
-------------- ------------
------- ----------------------------------------------------------------
------- --------------
----- --------- ------- --------------- -
------ --- ---------- -
------ -
-------
----- -
-------- ------
----------------- --------
-------- -----
-
--------
---------- --------------
------- -- -- ------ ------------
--
-
------ --- ------------ -
------ -
----- -
----- -------
------ -------
-
--
-
-
----------------------------------- -----------
---------
-------
------
----------- ----------------------------
-------
-------在这个示例代码中，我们定义了一个名为 MyElement 的自定义元素，并在它的模板中插值了一个名为 name 的属性。在 HTML 中，我们使用了这个自定义元素，并设置了它的 name 属性为 "Polymer"。
总结
在 Polymer 中，自定义元素的模板和模块是非常有用的。使用模板，我们可以方便地定义自定义元素的 HTML 内容和样式。使用模块，我们可以方便地定义自定义元素的属性和行为。希望这篇文章可以帮助你更好地理解 Polymer 中使用自定义元素的模板和模块的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657ef825d2f5e1655d9d88be