使用 Polymer 中的 Custom Elements 创建可重用 Web 组件-JavaScript中文网-JavaScript教程资源分享门户

什么是 Custom Elements？

Custom Elements 是 Web Components API 中的一部分，它使开发者能够定义自己的 HTML 标签，以便可以在 HTML 文档中调用它们。这些标签将会以类似于内置 HTML 标签的方式工作，有自己的属性、方法和事件。

Polymer 是一个 Web Components 库，它是由谷歌开源的，旨在简化 Web Components 的构建过程。在 Polymer 中，你可以使用 Custom Elements 来创建可重用的 Web 组件。

如何创建 Custom Elements？

Polymer 提供了一个基础元素 Polymer.Element，通过扩展此元素，你可以轻松地创建 Custom Elements。

以下是一个简单的 hello-world 组件：

<dom-module id="hello-world">
  <template>
    <h1>Hello, [[name]]!</h1>
  </template>
  <script>
    class HelloWorld extends Polymer.Element {
      static get is() { return 'hello-world'; }
      static get properties() {
        return {
          name: {
            type: String,
            value: 'World'
          }
        };
      }
    }
    customElements.define(HelloWorld.is, HelloWorld);
  </script>
</dom-module>

将上述代码保存为 hello-world.html 文件，然后在 HTML 页面中引入此文件即可。

<html>
  <head>
    <script type="module" src="./hello-world.html"></script>
  </head>
  <body>
    <hello-world name="Polymer"></hello-world>
  </body>
</html>

你可以在 name 属性中设置组件的名称，然后在组件内部使用 Polymer 的数据绑定语法 [[name]] 来引用它。

如何使用 Custom Elements？

在 HTML 页面中使用自定义元素与使用标准 HTML 元素类似，只需要将它包含在 HTML 页面中即可。

<hello-world name="Polymer"></hello-world>

此时，页面将会在 hello-world 元素内部渲染出 Hello, Polymer! 的文本。

总结

通过使用 Polymer 中的 Custom Elements，我们可以轻松地创建可重用的 Web 组件。Polymer 还提供了更多的特性来简化 Web Components 的开发，例如 Shadow DOM、Data Binding 等等。如果你想要深入学习 Web Components 的开发，那么 Polymer 无疑是一个不错的选择。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b61060add4f0e0ffec43e1