Questions tagged [polymer-2.x]

Polymer 2.x also makes improvements in several areas:

• Improved interoperability. By removing the need to use Polymer.dom for DOM manipulation, Polymer 2.0 makes it easier to use Polymer components with other libraries and frameworks. In addition, the shady DOM code has been separated out into a reusable polyfill, instead of being integrated into Polymer.

• Data system improvements. Polymer 2.0 includes targeted improvements to the data system. These changes make it easier to reason about and debug the propagation of data through and between elements. They also improve compatibility with top-down data flow approaches, like Flux.

• More standard. Polymer 2.x uses standard ES6 classes and the standard custom elements v1 methods for defining elements, instead of a Polymer factory method. You can mix in features using standard JavaScript (class expression mixins) instead of Polymer behaviors. (The Polymer factory method is still supported using a compatibility layer.)

HTML:my-element.html

<!-- import polymer-element -->
<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">

<dom-module id="my-element">

  <template>
        <style>
              /* scoped CSS rules for this element */
        </style>
        <!-- local DOM for your element -->
        <p>I'm a DOM element. This is my shadow DOM!</p>

        <!-- bind to the "owner" property -->
        This is <b>[[owner]]</b>'s creation.
  </template>

  <script>
    // Define the class for a new element called custom-element
    class MyElement extends Polymer.Element {

      static get is() { return "my-element"; }

      // configure owner property
      static get properties() {
        return {
          owner: {
            type: String,
            value: "Google",
          }
        };
      }

    }
    // Register the new element with the browser
    customElements.define(MyElement.is, MyElement );
  </script>

</dom-module>

Using my-element in other document:

<!-- Add the <link> tag in the head/top of your markup -->
<link rel="import" href="my-element.html">

<!-- Use your new element anywhere in the document -->
<my-element></my-element>

Source

More Examples