Polymer 是一个基于 Web 组件标准的库，可以用它来创建自定义元素，改善前端开发体验。本文将介绍如何使用 Polymer 创建自定义元素，并通过实例代码展示如何实现。
什么是自定义元素
自定义元素是一种 HTML 元素，使用者可以自定义其行为和样式，在应用中被重复使用。在以往，开发者通过继承原生控件的方法来创建自定义元素，但这样可能导致多继承和大量重复代码的问题。Web 组件解决了这个问题，使用者可以通过定义自己的元素从而创建自定义元素。
使用 Polymer 创建自定义元素的步骤
首先，我们需要创建一个新的 Polymer 元素。我们使用 Polymer 的 Polymer() 函数来达到这一目的，这个函数接受一个对象作为参数，这个对象描述了元素的行为和特性。
-- -------------------- ---- -------
----- --------- ------- --------------- -
------ --- ---- - ------ ------------- -
------ --- ------------ -
------ -
------- -
----- -------
------ ------ ------
-
--
-
-
----------------------------------- -----------上面的代码创建了一个 my-element 的自定义元素，它有一个 myProp 属性，类型为字符串，初始化值为 Hello world。
接下来，我们需要创建元素的模板。模板可以是普通的 HTML 或者使用 Polymer 的模板语法。
<dom-module id="my-element">
<template>
<h1>{{myProp}}</h1>
</template>
</dom-module>最后，我们需要导入 Polymer 的样式和库文件。在这个例子中，我们使用了 polymer/polymer-element.js 和 polymer/lib/elements/dom-module.js。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- --------------- -- --------- --------------- ------- ---------------------------------------------------------------------------------------- ----- ------------ --------------------------------------------------------------------------- ------- ------ ------------------------- ------- ----------------------------- ------- -------
现在，我们已经成功地创建了一个自定义元素，它的行为和外观可以被自己定义和控制。由于 Polymer 已经实现了 Web 组件的所有规范和 API，所以你可以像使用其他 HTML 元素一样使用自定义元素。
使用 Polymer 创建自定义元素的注意事项
- 自定义元素不支持自闭合标签。你必须像
<img>一样，使用<img></img>而不是<img/>。 - 在自定义元素中使用 slot 时需要注意自定义元素是否设置了
display属性（默认为inline），如果是inline，则 slot 内容的布局会受到影响。建议将自定义元素的display设为block。 - 当你写多个自定义元素时，需要使用
static get is()来避免重名。
实战示例
下面展示一个实战示例：创建一个自定义元素，它显示当前时间。
HTML
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- --------------- -- --------- ------------- ------- ---------------------------------------------------------------------------------------- ----- ------------ --------------------------------------------------------------------------- ------- ------ --------------------- ------- --------------------------- ------- -------
JavaScript
-- -------------------- ---- -------
----- ------- ------- --------------- -
------ --- ---- - ------ ----------- -
------ --- ------------ -
------ -
------------ -
----- -------
------ --- -----------------------
-
--
-
------------- -
--------
-------------- -- -
---------------- - --- ------------------------
-- ------
-
-
--------------------------------- ---------
--------- - ------------------------------------
------------------- - -
----------
-------
----- -
---------- ----
-------- ------
-
--------
---- -------------------------------
-----------
--样式
#time {
text-align: center;
}总结
使用 Polymer 创建自定义元素非常简单，只需要定义元素的行为和特征，就可以得到一个能重复使用的元素。通过学习本文的实战案例，你可以更深入理解 Polymer 的使用。在实际开发中，你可以使用 Polymer 创建各种自定义元素，这些元素可以提高开发效率和代码重用率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c079079e06631ab9cc9c84