使用 Polymer 3.0 单独定义自定义元素以根据需要使用它们答案

【问题标题】：Defining Custom Elements separately with Polymer 3.0 to use them based on demand使用 Polymer 3.0 单独定义自定义元素以根据需要使用它们
【发布时间】：2018-07-30 17:18:50
【问题描述】：

我是Polymer 3.0 世界的新手，我认为它有很大的潜力。

我按照这里指出的教程进行操作：

https://www.polymer-project.org/3.0/start/first-element/intro

这是最终的结果：

demo-element.js

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@polymer/iron-icons/iron-icons.js';
import '../icon-toggle.js';

class DemoElement extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          font-family: sans-serif;
          --icon-toggle-color: lightgrey;
          --icon-toggle-outline-color: black;
          --icon-toggle-pressed-color: red;
        }
      </style>

      <h3>Statically-configured icon-toggles</h3>
      <icon-toggle toggle-icon="star"></icon-toggle>
      <icon-toggle toggle-icon="star" pressed></icon-toggle>

      <h3>Data-bound icon-toggle</h3>
      <!-- use a computed binding to generate the message -->
      <div><span>[[_message(isFav)]]</span></div>
      <!-- curly brackets ({{}}} allow two-way binding --> 
      <icon-toggle toggle-icon="favorite" pressed="{{isFav}}"></icon-toggle>
    `;
  }
  _message(fav) {
    if (fav) {
      return 'You really like me!';
    } 
    else {
      return 'Do you like me?';
    }
  }
}
customElements.define('demo-element', DemoElement);

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script type="module" src="demo-element.js"></script>
    <custom-style>
      <style>
        /* Define a document-wide default */
        html {
          --icon-toggle-outline-color: red;
        }
        /* Overrides the value specified inside demo/demo-element.js */
        demo-element {
          --icon-toggle-pressed-color: blue;
        }
        /* This rule does not work! */
        body {
          --icon-toggle-color: purple;
        }
      </style>
    </custom-style>
  </head>
  <body>
    <demo-element></demo-element>
  </body>
</html>

但我的问题是：

Polymer 是否允许我按照以下方式单独构建自定义元素
（使用下面的pseudo-code）：

page.html

<html>
  <head>
    <script src="whatever-general-polymer-script.js"></script>
    <script src="component1-specific-script.js"></script>
    <script src="component2-specific-script.js"></script>
  </head>
  <body>
    <my-component1></my-component1>
    <my-component2></my-component2>
  </body>
</html>

所以我可以单独构建Polymer 元素，并通过导入正确的Javascript 文件并使用相应的自定义标签来根据需要使用它们。

或

Polymer 是否只允许我在它们构建的应用程序中使用我的自定义元素，例如：

<html>
  <head>
    <script src="whatever-general-polymer-script.js"></script>
    <script src="components-bundle-script.js"></script>
  </head>
  <body>
    <my-component1></my-component1>
    <my-component2></my-component2>
  </body>
</html>

谢谢！

【问题讨论】：

标签： javascript html dom polymer web-component

【解决方案1】：

回答您的问题：

“这样我就可以单独构建 Polymer 元素，并通过导入正确的 Javascript 文件并使用相应的自定义标签来根据需要使用它们”

是的，这就是 web 组件和聚合物创建可跨多个项目（应用程序）重用的独立组件的要点。

“Polymer 是否只允许我在构建它们的应用程序中使用我的自定义元素”

不，这取决于您如何定义元素，如果您可以在应用程序之外使用它们。

如果您查看以下documentation。在使用聚合物 CLI 创建和元素之后，您将看到这一点。

它创建一个具有以下结构的目录：

-your-element
  |-demo
    |-index.html      
  |-index.html
  |-your-element.js
  |-package.json
  |-polymer.json
  |-test
    |-index.html
    |-your-element_test.html

如果你运行命令

 polymer serve

它将启动一个服务器，以便您可以看到您的组件在 Web 浏览器上运行。如果您检查演示文件夹中的索引文件。您将看到它是如何在非聚合物应用程序的 html 文件中导入和使用组件的。

如果您想共享组件并在不同的项目中使用它，您需要将组件发布到 npm 注册表。所以你可以将它添加到任何其他项目的 package.json 中，并在需要时使用它。

【讨论】：