ES6クラスを使用してポリマー要素を作成しますか？

Question

私は、要素を作成するためにPolymer関数に渡すクラスを作成したいと考えています。明らかな使用事例は、開発者がポリマー要素を構築するために使用できる基本クラスを持つことです。

しかし、Polymerはクラスのライフサイクルメソッドを無視しているようです。次のコードは#createdを実行しません。回避策はありますか？

//attempt 1 
class CustomElement { 

    is = 'sample-multi-view-polymer-buic' 

    created() { console.log('created') } // never called 
} 

export default Polymer(new CustomElement()) // doesn't work (see error below) 

私はBabelを使ってES6からES5に移行しているので、上記のコードは以下のコードと同等です。それはまた動作しません。

// attempt2 
function CustomElement() { 

    this.is = 'sample-multi-view-polymer-buic' 
} 

CustomElement.prototype.created= function() { console.log('hi') } //never called 

Answer 1

article for using ES6 with Polymer in the docs

---

は、だからあなたの最後に行方不明2つのものがありますあります：

• あなたはbeforeRegistered()方法が欠落しています。
• エレメントのクラスをインスタンス化するには、Polymer()を使用する必要があります。

は、ここで私はそれを行う方法は次のとおりです。

<base href="https://polygit.org/components/"> 
 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
<link href="polymer/polymer.html" rel="import"> 
 
<link href="paper-input/paper-input.html" rel="import"> 
 

 
<dom-module id="x-example"> 
 

 
    <template> 
 
    <paper-input value="{{name::input}}"></paper-input> 
 
    <h4>{{name}}</h4> 
 
    </template> 
 
    
 
    <script> 
 
    "use strict"; 
 

 
    class xExample { 
 

 
     beforeRegister() { 
 
     this.is = "x-example"; 
 
     this.properties = { 
 
      name: { 
 
      type: String, 
 
      value: "I'm a data-binded prop" 
 
      } 
 
     } 
 
     } 
 

 
     ready() { 
 
     console.log("ready"); 
 
     } 
 
    } 
 

 
    Polymer(xExample); 
 
    </script> 
 

 
</dom-module> 
 

 
<x-example></x-example>

注：

• 上記のスニペットは唯一の他のすべてのためにクローム/ FF
• 上で動作しますあなたがすることができますfコースはそれを「ベルベイズ」します。