Question

我是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文件并使用相应的自定义标记来根据需要使用它们。

OR

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

回答您的问题：

“因此，我可以通过导入适当的Javascript文件并使用相应的自定义标签来分离并构建Polymer元素，并根据需要使用它们”

是的，这是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中，并在需要时使用它。

使用Polymer 3.0分别定义自定义元素以根据需求使用它们

1 个答案: