Search code examples
javascripthtmldompolymerweb-component

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

I'm new to the Polymer 3.0 world, I think it has a big potential.

I followed the tutorial pointed here:

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

and this was the final result:

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>

But my question is:

Does Polymer allow me to build custom elements separately like in the following way
(using pseudo-code below):

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>

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.

OR

Does Polymer only allow me to use my custom elements inside the application they were built, for example:

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

Thanks!

Solution

  • Answering your questions:

    "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"

    Yes that is the main point of web-components and polymer to create isolated components that you can reuse across multiple projects(applications).

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

    No, it depends on how you define the elements if you can use them outside your applications.

    if you look at the following documentation. You will see that after creating and element using the polymer CLI.

    It creates a directory with the following structure:

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

    If you run the command

     polymer serve

    It will start a server so you can see your component running on a web browser. If you inspect the index file inside the demo folder. You will see how it is importing and using the component in an html file that is not a polymer application.

    If you wanted to share the component and to use it on different projects you will need to publish your component to an npm registry. So you can add it to the package.json of any other project and use it when needed.