Polymer 是 Google 推出的一款 web 组件化框架，它采用了基于 web 标准的 Web Components 规范，在用 JavaScript 构建 Web 应用程序时，提供了更高效、更灵活的开发体验。而 polymer-next 则是 polymer 的升级版本，提供了改进的开发体验和更丰富的功能。
在本文中，我们将向您介绍如何使用 npm 包 polymer-next 来构建基于 Polymer 的 Web 应用程序。
安装 polymer-next
要使用 polymer-next，首先需要安装它。你可以通过以下命令在你的项目中安装最新版本的 polymer-next：
npm install polymer-next
创建 polymer-next 组件
在 Polymer 中，web 组件是一个 HTML 元素，它可以用来封装 HTML、CSS 和 JS 功能，并提供语义化的组件接口。创建 Polymer 组件有两种主要方式：使用 JavaScript 类或者是继承 Polymer 元素。
使用 JavaScript 类的方式创建 Polymer 组件非常简单。你只需定义一个 JavaScript 类，然后通过 polymer-next 模块中的 Polymer 函数包裹它即可，示例代码如下：
-- -------------------- ---- -------
------ - ------- - ---- ---------------
----- --------- ------- ----------- -
------------- -
--------
---------------- - ----- - ------ ----------
-
-
-------------------上面的代码中，我们首先引入 polymer-next 中的 Polymer 函数。然后我们定义了一个名为 MyElement 的 JavaScript 类，它继承自 HTMLElement。在构造函数中，我们设置了当前元素的文本内容为 “I'm a custom element.”。最后，我们通过 Polymer(MyElement) 将其包裹，从而使它成为了一个 Polymer 元素。
使用继承的方式创建 Polymer 组件与使用 JavaScript 类的方式非常类似，只需继承 Polymer.Element 类，并在其构造函数中调用 super() 函数。这里就不再赘述了。
编写 Polymer 组件的模板和样式
Polymer 允许使用模板和样式来定义组件的外观和行为。模板是组件的 HTML 内容，可以包含标准的 HTML 元素和 Polymer 元素。样式使用 CSS 文件或内联样式的方式定义，并支持诸如变量、层叠和条件选择等高级功能。
以下是一个示例的 Polymer 组件，它包含了一个模板和一个样式：
-- -------------------- ---- -------
------ - ------- - ---- ---------------
----- --------- ------- --------------- -
------ --- ---------- -
------ -
-------
-- ------ --
----- -
------ -----
-
--------
---------- -----------
-
-
------------- -
--------
-
-
----------------------------------- -----------上面的代码中，我们在 MyElement 类中定义了一个名为 template 的静态方法，它返回一个 HTML 字符串。在这个字符串中，我们使用了 <style> 标签来定义了一个 CSS 规则，将 color 属性设置为蓝色。我们还使用了一个 h1 标签来显示 “Hello, World!” 的文本内容。
最后，我们调用 customElements.define 函数注册了我们的组件。这个函数的第一个参数是组件的名称，它必须包含短横线。第二个参数是组件的构造函数。
在 HTML 中使用 Polymer 组件
当你创建了一个 Polymer 组件之后，你可以将它添加到你的 HTML 中。有两种方法可以这样做。
CDN 挂载
一种方法是使用 CDN 挂载的方式引用 Polymer 和你的自定义组件。你需要在 HTML 中添加以下代码：
<!-- 引入 Polymer --> <script src="https://unpkg.com/@polymer/polymer@next"></script> <!-- 引入你的自定义组件 --> <script src="https://unpkg.com/your-element-file.js"></script> <!-- 使用你的自定义组件 --> <your-element></your-element>
其中 your-element-file.js 是你打包后自定义组件的生成文件。
本地注册
另一种方法是将自定义元素安装到 DOM 中，在使用自定义元素之前，我们需要进行元素自定义的注册，以下是一个示例：
-- -------------------- ---- -------
------
------
--------- -----------
------- --------------
------ - --------- - ---- ----------------------------
----------------------------------- -----------
---------
-------
------
-------------------------
-------
-------在上面的代码中，我们引入了一个 JavaScript 模块文件 your-element.js，并在其内定义一个名为 MyElement 的类，这个类继承了 Polymer 元素并且包含了一个 template 方法。我们通过 customElements.define 方法将 MyElement 这个自定义元素注册进 DOM 中，并通过 <my-element></my-element> 的方式使用它。
小结
Polymer-next 是一个颇具潜力的 web 组件化框架，可以为你提供更高效、更灵活和更丰富的开发体验。在本文中，我们向你介绍了如何使用 npm 包 polymer-next 来创建和使用 Polymer 组件。希望这篇文章能够帮助你更好地掌握 Polymer 的使用技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cba81e8991b448e629b