ポリマー-カスタム要素

Polymerは、標準のHTML要素を使用してカスタム要素を作成できるフレームワークです。カスタムWeb要素は次の機能を提供します-

クラスを関連付けるカスタム要素名を提供します。
カスタム要素インスタンスの状態を変更すると、ライフサイクルコールバックが要求されます。
インスタンスの属性を変更すると、コールバックが要求されます。

次のコードに示すように、ES6クラスを使用してカスタム要素を定義し、クラスをカスタム要素に関連付けることができます。

//ElementDemo class is extending the HTMLElement
class ElementDemo extends HTMLElement {
  //code here
};

//link the new class with an element name
window.customElements.define('element-demo', ElementDemo);

カスタム要素は、以下に示すように標準要素として使用することができます-

<element-demo></element-demo>

注-カスタム要素名は小文字で始まり、名前の間にダッシュを含める必要があります。

カスタム要素のライフサイクル

カスタム要素ライフサイクルは、要素ライフサイクルの変更を担当するカスタム要素反応のセットを提供し、次の表で定義されています。

Sr.No.	Reactions & Description
1	constructor 要素を作成するか、以前に作成した要素を定義すると、この要素の反応が呼び出されます。
2	connectedCallback ドキュメントに要素を追加すると、この要素の反応が呼び出されます。
3	disconnectedCallback ドキュメントから要素を削除すると、この要素の反応が呼び出されます。
4	attributeChangedCallback ドキュメントの要素を変更、追加、削除、または置換するたびに、この要素の反応が呼び出されます。

要素のアップグレード

仕様で定義する前にカスタム要素を使用できます。要素の既存のインスタンスは、その要素に定義を追加することでカスタムクラスにアップグレードされます。

カスタム要素の状態には、次の値が含まれています-

uncustomized -有効なカスタム要素名は、組み込み要素または不明な要素のいずれかです。これらはカスタム要素にはなりません。
undefined -要素は有効なカスタム要素名を持つことができますが、定義することはできません。
カスタム-要素には、定義およびアップグレードできる有効なカスタム要素名を付けることができます。
failed -無効なクラスの失敗した要素をアップグレードしようとしています。

要素を定義する

カスタム要素を定義するには、Polymer.Elementを拡張するクラスを作成し、そのクラスをcustomElements.defineメソッドに渡します。クラスには、カスタム要素のHTMLタグ名を返すgetterメソッドが含まれます。例えば-

//ElementDemo class is extending the Polymer.Element
class ElementDemo extends Polymer.Element {
   static get is() { return 'element-demo'; }
   static get properties() {
      . . .
      . . .
   }
   constructor(){
      super();
      . . .
      . . .
   }
   . . .
   . . .
}

//Associate the new class with an element name
window.customElements.define(ElementDemo.is, ElementDemo);

//create an instance with createElement
var el1 = document.createElement('element-demo');

インポートとAPI

Polymer要素は、次の3つのHTMLインポートを指定することで定義できます-

polymer-elementl -Polymer.Element基本クラスを指定します。
legacy-elementl -Polymer.LegacyElement基本クラスを使用してPolymer.Elementを拡張し、1.x互換のレガシーAPIを追加します。また、従来のPolymer（）ファクトリメソッドを定義することにより、ハイブリッド要素を作成します。
polymerl -これは、1.xポリマーに含まれていたヘルパー要素とともにPolymerベースクラスで構成されます。

メインHTMLドキュメントで要素を定義する

HTMLImports.whenReady（）関数を使用して、メインHTMLドキュメントに要素を定義できます。

例

次の例は、メインHTMLドキュメントで要素を定義する方法を示しています。 indexlファイルを作成し、次のコードを追加します。

<!doctype html>
<html lang = "en">
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymerl">
      <link rel = "import" href = "define-elementl">
   </head>

   <body>
      <define-element></define-element>
   </body>
</html>

ここで、define-elementlというカスタム要素を作成し、次のコードを含めます。

<dom-module id = "define-element">
   <template>
      <h2>Welcome to finddevguides!!!</h2>
   </template>

   <script>
      HTMLImports.whenReady(function(){
         Polymer ({
            is: "define-element"
         })
      })
   </script>
</dom-module>

出力

アプリケーションを実行するには、作成されたプロジェクトディレクトリに移動し、次のコマンドを実行します。

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

ポリマー定義要素

レガシー要素を定義する

Legacy要素は、Polymer関数を使用して要素を登録するために使用できます。Polymer関数は、新しい要素のプロトタイプを取得します。プロトタイプには、カスタム要素のHTMLタグ名を定義する is を含める必要があります。

例

//registering an element
ElementDemo = Polymer ({
   is: 'element-demo',

  //it is a legecy callback, called when the element has been created
   created: function() {
     this.textContent = 'Hello World!!!';
   }
});

//'createElement' is used to create an instance
var myelement1 = document.createElement('element-demo');

//use the constructor create an instance
var myelement2 = new ElementDemo();

ライフサイクルコールバック

ライフサイクルコールバックは、 Polymer.Element クラスの組み込み機能のタスクを実行するために使用されます。 Polymerはreadyコールバックを使用します。これは、PolymerがDOM要素の作成と初期化を完了すると呼び出されます。

以下は、Polymer.jsのレガシーコールバックのリストです。

created -プロパティ値を設定してローカルDOMを初期化する前に要素を作成するときに呼び出されます。
ready -プロパティ値を設定し、ローカルDOMを初期化した後に要素を作成すると呼び出されます。
attached -要素をドキュメントに添付した後に呼び出され、要素の存続期間中に複数回呼び出すことができます。
detached -ドキュメントから要素を分離した後に呼び出され、要素の存続期間中に複数回呼び出すことができます。
attributeChanged -要素の属性に変更があり、宣言されたプロパティと互換性のない属性の変更を保持するときに呼び出されます。

プロパティの宣言

プロパティは、データシステムのデフォルト値と他の特定の機能を追加する要素で宣言することができ、次の機能を指定するために使用することができます-

プロパティタイプとデフォルト値を指定します。
プロパティ値に変更がある場合、オブザーバーメソッドを呼び出します。
プロパティ値への予期しない変更を停止するために、読み取り専用ステータスを指定します。
プロパティ値を変更するとイベントをトリガーする双方向データバインディングをサポートします。
これは計算されたプロパティであり、他のプロパティに応じて値を動的に計算します。 *プロパティ値を変更すると、対応する属性値が更新および反映されます。

次の表は、プロパティオブジェクトでサポートされる各プロパティのキーを示しています。

Sr.No.	Key & Description	Type
1	type* プロパティの型が型のコンストラクターを使用して決定される属性から逆シリアル化します。	constructor (Boolean, Date, Number, String, Array or Object)
2	value プロパティのデフォルト値を指定し、関数の場合は、戻り値をプロパティのデフォルト値として使用します。	boolean, number, string or function.
3	reflectToAttribute このキーがtrueに設定されている場合、ホストノードの対応する属性を設定します。プロパティ値をブール値として設定した場合、属性は標準のHTMLブール属性として作成できます。	boolean
4	readOnly このキーがtrueに設定されている場合、割り当てまたはデータバインディングによってプロパティを直接設定することはできません。	boolean
5	notify このキーをtrueに設定し、プロパティを変更すると、property-name-changedイベントがトリガーされる場合、双方向データバインディングにプロパティを使用できます。	boolean
6	computed メソッドを呼び出すことにより、引数が変更されるたびに引数の値を計算できます。値はメソッド名と引数リストとして簡略化されます。	string
7	observer プロパティ値が変更されたときに、値によって簡略化されたメソッド名を呼び出します。	string

属性の逆シリアル化

プロパティがプロパティオブジェクトで構成されている場合、指定されたタイプと要素インスタンスの同じプロパティ名に従って、インスタンスの属性と一致するプロパティ名を逆シリアル化します。

プロパティオブジェクトに他のプロパティオプションが定義されていない場合は、指定されたタイプをプロパティの値として直接設定できます。それ以外の場合は、プロパティ構成オブジェクトのtypeキーに値を提供します。

ブールプロパティの構成

ブールプロパティは、falseに設定することでマークアップから構成できます。trueに設定されている場合、値のある属性またはない属性がtrueに等しくなるため、マークアップから構成できません。したがって、Webプラットフォームの属性の標準的な動作として知られています。

オブジェクトと配列のプロパティは、それらをJSON形式で渡すことで設定できます-

<element-demo player = '{ "name": "Sachin", "country": "India" }'></element-demo>

デフォルトのプロパティ値の構成

既定のプロパティは、プロパティオブジェクトの値フィールドを使用して構成でき、プリミティブ値、または値を返す関数のいずれかです。

例

次の例は、プロパティオブジェクトでデフォルトのプロパティ値を設定する方法を示しています。

<link rel = "import" href = "../../bower_components/polymer/polymer-elementl">

//it specifies the start of an element's local DOM
<dom-module id="polymer-app">
   <template>
      <style>
         :host {
            color:#33ACC9;
         }
      </style>
      <h2>Hello...[[myval]]!</h2>
   </template>

   <script>
     //cusom element extending the Polymer.Element class
      class PolymerApp extends Polymer.Element {
         static get is() { return 'polymer-app'; }
         static get properties() {
            return {
               myval: {
                  type: String,
                 //displaying this value on screen
                  value: 'Welcome to finddevguides;!!!'
               },
               data: {
                  type: Object,
                  notify: true,
                  value: function() { return {}; }
               }
            }
         }
      }
      window.customElements.define(PolymerApp.is, PolymerApp);
   </script>
</dom-module>

出力

前の例のようにアプリケーションを実行し、 http：//127.0.0.1：8000/ に移動します。出力は次のようになります。

ポリマーのデフォルトのプロパティ値の設定

読み取り専用プロパティ

プロパティオブジェクトでreadOnlyフラグをtrueに設定すると、生成されたデータの予期しない変更を回避できます。要素は、プロパティ値を変更するために、_setProperty（value）規則のセッターを使用します。

例

次の例では、プロパティオブジェクトで読み取り専用プロパティを使用しています。 indexlファイルを作成し、次のコードを追加します

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>

      <link rel = "import" href = "bower_components/polymer/polymerl">
      <link rel = "import" href = "my-elementl">
   </head>

   <body>
      <my-element></my-element>
   </body>
</html>

次に、my-elementlという名前の別のファイルを作成し、次のコードを含めます。

<link rel = "import" href = "bower_components/polymer/polymer-elementl">
<link rel = "import" href = "prop-elementl">

//it specifies the start of an element's local DOM
<dom-module id = "my-element">
   <template>
      <prop-element my-prop = "{{demoProp}}"></prop-element>
      <p>Present value: <span>{{demoProp}}</span></p>
   </template>

   <script>
      Polymer ({
         is: "my-element", properties: {
            demoProp: String
         }
      });
   </script>
</dom-module>

次に、prop-elementlというファイルをもう1つ作成し、次のコードを追加します。

//it specifies the start of an element's local DOM
<dom-module id="prop-element">
   <template>
      <button on-click="onClickFunc">Change value</button>
   </template>

   <script>
      Polymer ({
         is: "prop-element", properties: {
            myProp: {
               type: String,
               notify: true,
               readOnly: true,
               value: 'This is initial value...'
            }
         },
         onClickFunc: function(){
            this._setMyProp('This is new value after clicking the button...');
         }
      });
   </script>
</dom-module>

出力

前の例のようにアプリケーションを実行し、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

ポリマー読み取り専用プロパティ

ボタンをクリックすると、次のスクリーンショットに示すように値が変更されます。