Polymer 3.0单独定义自定义元素，按需使用

Question

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

我遵循了此处指出的教程：

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

这是最终结果：

演示-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>

谢谢！

Answer 1

回答您的问题：

"so I can build Polymer elements by separate and use them as I needed by importing the proper Javascript file and using the corresponding custom tag"

是的，这是 Web 组件和聚合物的要点，用于创建可在多个项目（应用程序）中重复使用的独立组件。

"Does Polymer only allow me to use my custom elements inside the application they were built"

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

如果你看下面的documentation。在使用 polymer 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 浏览器上看到您的组件运行ning。如果您检查演示文件夹中的索引文件。您将看到它是如何导入和使用非聚合物应用程序的 html 文件中的组件的。

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

Polymer 3.0单独定义自定义元素，按需使用

Defining Custom Elements separately with Polymer 3.0 to use them based on demand

html

javascript

dom

web-component

polymer