Polymer 2.x is designed to support the new custom elements v1 and shadow DOM v1 specifications being implemented by most major browser vendors, while providing a smooth migration path for Polymer 1.x users.
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.)
Example:
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>
