From e2118aa4d7f81dfed2d5c1e96903d6c0bdacdce0 Mon Sep 17 00:00:00 2001 From: Kevin Schaaf Date: Fri, 24 Feb 2017 13:03:57 -0800 Subject: [PATCH] Update readme. config-->properties & observers. Describe template getting options. --- README.md | 21 ++++++++++----------- img/migration.png | Bin 530877 -> 544823 bytes 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 4343188c26..df6004032f 100644 --- a/README.md +++ b/README.md @@ -87,9 +87,8 @@ Basic syntax looks like this: // Extend Polymer.Element base class class MyElement extends Polymer.Element { static get is() { return 'my-element'; } - static get config() { - return { /* properties, observers meta data */ } - } + static get properties() { return { /* properties metadata */ } } + static get observers() { return [ /* observer descriptors */ ] } constructor() { super(); ... @@ -111,7 +110,8 @@ Users can then leverage native subclassing support provided by ES6 to extend and // Subclass existing element class MyElementSubclass extends MyElement { static get is() { return 'my-element-subclass'; } - static get config() { ... } + static get properties() { return { /* properties metadata */ } } + static get observers() { return [ /* observer descriptors */ ] } constructor() { super(); ... @@ -125,12 +125,11 @@ customElements.define(MyElementSubclass.is, MyElementSubclass); Below are the general steps for defining a custom element using this new syntax: -* Extend from `Polymer.Element`. This class provides the minimal surface area to integrate with 2.0's data binding system. It provides only standard custom element lifecycle with the addition of `ready`. (You can extend from `Polymer.LegacyElement` to get all of the Polymer 1.0 element api, but since most of this api was rarely used, this should not often be needed.) -* Implement "behaviors" as [mixins that return class expressions](http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/) -* Property metadata (`properties`) and multi-property/wildcard observers (`observers`) should be put on the class as a static in a property called `config` -* Element's `is` property should be defined as a static on the class -* Implement a static `template` getter to provide a template to stamp inside the element. By default the first `