ポリマー-カスタム要素

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>

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

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

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

シニア番号 反応と説明
1

constructor

要素を作成するか、以前に作成した要素を定義すると、この要素の反応が呼び出されます。
2

connectedCallback

ドキュメントに要素を追加すると、この要素の反応が呼び出されます。
3

disconnectedCallback

ドキュメントから要素を削除すると、この要素リアクションが呼び出されます。
4

attributeChangedCallback

ドキュメントから要素を変更、追加、削除、または置換するたびに、この要素リアクションが呼び出されます。

要素のアップグレード

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

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

  • uncustomized −有効なカスタム要素名は、組み込み要素または不明な要素のいずれかであり、カスタム要素になることはできません。

  • undefined −要素には有効なカスタム要素名を付けることができますが、定義することはできません。

  • custom −要素には、定義およびアップグレードできる有効なカスタム要素名を付けることができます。

  • 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

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

  • polymer-element.html −Polymer.Element基本クラスを指定します。

  • legacy-element.html− Polymer.LegacyElement基本クラスを使用してPolymer.Elementを拡張し、1.x互換のレガシーAPIを追加します。また、従来のPolymer（）ファクトリメソッドを定義することにより、ハイブリッド要素を作成します。

  • polymer.html −これは、1.xpolymer.htmlに含まれているヘルパー要素とともにPolymer基本クラスで構成されます。

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

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

例

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

<!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/polymer.html">
      <link rel = "import" href = "define-element.html">
   </head>
   
   <body>
      <define-element></define-element>
   </body>
</html>

次に、define-element.htmlというカスタム要素を作成し、次のコードを含めます。

<dom-module id = "define-element">
   <template>
      <h2>Welcome to Tutorialspoint!!!</h2>
   </template>
   
   <script>
      HTMLImports.whenReady(function(){
         Polymer ({
            is: "define-element"
         })
      })  
   </script>
</dom-module>

出力

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

polymer serve

ブラウザを開いて、に移動します http://127.0.0.1:8081/。以下が出力になります。

レガシー要素を定義する

レガシー要素は、新しい要素のプロトタイプを取得するポリマー関数を使用して要素を登録するために使用できます。プロトタイプにはis これは、カスタム要素のHTMLタグ名を定義します。

例

//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 −要素の属性に変更があり、宣言されたプロパティと互換性のない属性の変更を保持している場合に呼び出されます。

プロパティの宣言

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

  • プロパティタイプとデフォルト値を指定します。

  • プロパティ値に変更があった場合、オブザーバーメソッドを呼び出します。

  • プロパティ値への予期しない変更を停止するための読み取り専用ステータスを指定します。

  • プロパティ値を変更するとイベントをトリガーする双方向データバインディングのサポートを提供します。

  • これは計算されたプロパティであり、他のプロパティに応じて動的に値を計算します。

  • プロパティ値を変更すると、対応する属性値が更新されて反映されます。

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

シニア番号 キーと説明 タイプ
1

type

これは、プロパティタイプがタイプのコンストラクタを使用して決定される属性から逆シリアル化します。

 コンストラクター（ブール値、日付、数値、文字列、配列、またはオブジェクト）
2

value

プロパティのデフォルト値を指定し、関数の場合は、プロパティのデフォルト値として戻り値を使用します。

 ブール値、数値、文字列、または関数。
3

reflectToAttribute

このキーがtrueに設定されると、ホストノードに対応する属性が設定されます。プロパティ値をブール値に設定すると、属性を標準のHTMLブール属性として作成できます。

 ブール値
4

readOnly

このキーがtrueに設定されている場合、割り当てまたはデータバインディングによってプロパティを直接設定することはできません。

 ブール値
5

notify

このキーがtrueに設定されていて、プロパティを変更すると、property-name-changedイベントがトリガーされる場合、双方向データバインディングにプロパティを使用できます。

 ブール値
6

computed

メソッドを呼び出すことにより、引数が変更されるたびに引数の値を計算できます。値はメソッド名と引数リストとして簡略化されます。

 ストリング
7

observer

プロパティ値が変更されたときに、値によって簡略化されたメソッド名を呼び出します。

 ストリング

属性の逆シリアル化

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

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

ブールプロパティの構成

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

オブジェクトと配列のプロパティは、JSON形式で-として渡すことで構成できます。

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

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

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

例

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

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

//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 Tutorialspoint;!!!'
               },
               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に設定することにより、生成されたデータの予期しない変更を回避できます。Elementは、プロパティ値を変更するために、規則_setProperty（value）のセッターを使用します。

例

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

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "my-element.html">
   </head>
   
   <body>
      <my-element></my-element>
   </body>
</html>

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

<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<link rel = "import" href = "prop-element.html">

//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-element.htmlというファイルをもう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/。以下が出力になります。

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

プロパティを属性に反映する

HTML属性は、を設定することでプロパティ値と同期できます。 reflectToAttribute プロパティ構成オブジェクトのプロパティでtrueになります。

属性のシリアル化

プロパティ値は、プロパティを属性に反映またはバインドしながら、属性にシリアル化できます。デフォルトでは、値の現在のタイプに応じて値をシリアル化できます。

  • String −シリアル化の必要はありません。

  • Date or Number − toStringを使用して、値をシリアル化します。

  • Boolean −表示された値のない属性をtrueまたはfalseに設定します。

  • Array or Object − JSON.stringifyを使用して、値をシリアル化します。

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved