什么是 Custom Elements？
Custom Elements 是 Web Components 的一部分，它允许您创建自定义 HTML 元素并在您的 Web 应用程序中重复使用它们。Custom Elements 允许您创建自己的 HTML 标签，这些标签可以像任何其他标准 HTML 标签一样使用。它们可以包含自定义行为和样式，并可以通过 JavaScript 进行动态操作。
在 Polymer 中使用 Custom Elements
Polymer 是一个 Web Components 库，它使得构建 Web 应用程序变得更加容易。Polymer 提供了一种使用 Custom Elements 的简单方法。
创建 Custom Element
要创建一个 Custom Element，您需要创建一个继承自 HTMLElement 的类，并使用 customElements.define() 方法将其注册为 Custom Element。以下是一个简单的示例：
class MyElement extends HTMLElement {
constructor() {
super();
this.innerHTML = '<h1>Hello World!</h1>';
}
}
customElements.define('my-element', MyElement);在上面的示例中，我们创建了一个名为 MyElement 的 Custom Element，并将其注册为 my-element 标签。在构造函数中，我们设置了元素的 innerHTML 属性，以便在页面上显示 “Hello World!”。
使用 Custom Element
要在页面上使用 Custom Element，您只需要在 HTML 中使用自定义标签。例如，如果您要使用上面的示例中创建的 MyElement，您可以这样做：
<my-element></my-element>
当页面加载时，浏览器将创建一个 MyElement 的实例，并在页面上显示 “Hello World!”。
添加属性
您可以向 Custom Element 添加属性，以便在元素上设置值。要添加属性，请将属性添加到类的 constructor 中，并使用 this.setAttribute() 方法将其设置为元素的属性。以下是一个示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ---------- -------------
------------------------- -------------
-
-
----------------------------------- -----------在上面的示例中，我们添加了一个名为 name 的属性，并将其设置为 “MyElement”。
监听属性变化
您还可以监听 Custom Element 上属性的变化。要监听属性变化，请使用 observedAttributes 属性指定要监听的属性，并在类中添加 attributeChangedCallback() 方法。以下是一个示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
------------- -
--------
-------------- - ---------- -------------
------------------------- -------------
-
------------------------------ --------- --------- -
-------------------- ------- ---- ----------- -- --------------
-
-
----------------------------------- -----------在上面的示例中，我们使用 observedAttributes 属性指定要监听的属性，并添加了 attributeChangedCallback() 方法来处理属性变化事件。当 name 属性发生变化时，我们将打印出属性名称、旧值和新值。
结论
在 Polymer 中使用 Custom Elements 可以使您的 Web 应用程序更加灵活和可扩展。通过创建自己的自定义元素，您可以轻松地重用代码，并将应用程序的不同部分分解为可重用的组件。希望这篇文章能够帮助您更好地理解如何在 Polymer 中使用 Custom Elements。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6745324dc1a23897ea8c3c63