Polymer-맞춤 요소

Polymer는 표준 HTML 요소를 사용하여 맞춤 요소를 만들 수있는 프레임 워크입니다. 사용자 지정 웹 요소는 다음과 같은 기능을 제공합니다.

  • 연관 클래스와 함께 사용자 정의 요소 이름을 제공합니다.

  • 사용자 지정 요소 인스턴스의 상태를 변경하면 수명주기 콜백이 요청됩니다.

  • 인스턴스의 속성을 변경하면 콜백이 요청됩니다.

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 − 사용자 지정 요소 이름은 소문자로 시작해야하며 이름 사이에 대시를 포함해야합니다.

사용자 지정 요소 수명주기

사용자 지정 요소 수명주기는 요소 수명주기의 변경을 담당하고 다음 표에 정의 된 사용자 지정 요소 반응 집합을 제공합니다.

Sr. 아니. 반응 및 설명
1

constructor

요소를 생성하거나 이전에 생성 한 요소를 정의하면이 요소 반응이 호출됩니다.

2

connectedCallback

문서에 요소를 추가하면이 요소 반응이 호출됩니다.

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

Polymer 요소는 다음 세 가지 HTML 가져 오기를 지정하여 정의 할 수 있습니다.

  • polymer-element.html − Polymer.Element 기본 클래스를 지정합니다.

  • legacy-element.html− Polymer.LegacyElement 기본 클래스를 사용하여 Polymer.Element를 확장하고 1.x 호환 레거시 API를 추가합니다. 또한 레거시 Polymer () 팩토리 메서드를 정의하여 하이브리드 요소를 생성합니다.

  • polymer.html − 1.x polymer.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/. 다음은 출력입니다.

레거시 요소 정의

레거시 요소는 새 요소의 프로토 타입을 가져 오는 Polymer 함수를 사용하여 요소를 등록하는 데 사용할 수 있습니다. 프로토 타입에는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는 Polymer가 DOM 요소 생성 및 초기화를 완료 할 때 호출되는 ready 콜백을 사용합니다.

다음은 Polymer.js의 레거시 콜백 목록입니다.

  • created − 속성 값을 설정하고 로컬 DOM을 초기화하기 전에 요소를 생성 할 때 호출됩니다.

  • ready − 속성 값 설정 및 로컬 DOM 초기화 후 요소 생성시 호출됩니다.

  • attached − 문서에 요소를 첨부 한 후 호출되며 요소의 수명 동안 여러 번 호출 할 수 있습니다.

  • detached − 문서에서 요소를 분리 한 후 호출되며 요소의 수명 동안 여러 번 호출 할 수 있습니다.

  • attributeChanged − 요소의 속성이 변경 될 때 호출되며 선언 된 속성과 호환되지 않는 속성 변경을 보유합니다.

속성 선언

속성은 데이터 시스템에 기본값 및 기타 특정 기능을 추가하기 위해 요소에 선언 할 수 있으며 다음 기능을 지정하는 데 사용할 수 있습니다.

  • 속성 유형과 기본값을 지정합니다.

  • 속성 값이 변경되면 관찰자 메서드를 호출합니다.

  • 속성 값에 대한 예기치 않은 변경을 중지하기 위해 읽기 전용 상태를 지정합니다.

  • 속성 값을 변경할 때 이벤트를 트리거하는 양방향 데이터 바인딩을 지원합니다.

  • 다른 속성에 따라 동적으로 값을 계산하는 계산 된 속성입니다.

  • 속성 값을 변경할 때 해당 속성 값을 업데이트하고 반영합니다.

다음 표는 properties 객체에서 지원하는 각 속성의 키를 보여줍니다.

Sr. 아니. 키 및 설명 유형
1

type

속성 유형이 유형의 생성자를 사용하여 결정되는 속성에서 역 직렬화합니다.

생성자 (부울, 날짜, 숫자, 문자열, 배열 또는 객체)
2

value

속성의 기본값을 지정하고 함수 인 경우 반환 값을 속성의 기본값으로 사용합니다.

부울, 숫자, 문자열 또는 함수.

reflectToAttribute

이 키가 true로 설정되면 호스트 노드에서 해당 속성을 설정합니다. 속성 값을 Boolean으로 설정하면 속성을 표준 HTML 부울 속성으로 만들 수 있습니다.

부울
4

readOnly

이 키가 true로 설정된 경우 할당 또는 데이터 바인딩으로 속성을 직접 설정할 수 없습니다.

부울
5

notify

양방향 데이터 바인딩에 속성을 사용할 수 있습니다.이 키가 true로 설정되어 있고 속성을 변경할 때 속성 이름 변경 이벤트가 트리거됩니다.

부울
6

computed

메서드를 호출하여 인수가 변경 될 때마다 값을 계산할 수 있으며 값은 메서드 이름과 인수 목록으로 단순화됩니다.

7

observer

속성 값이 변경되면 값으로 단순화 된 메서드 이름을 호출합니다.

속성 역 직렬화

속성이 속성 개체에 구성된 경우 지정된 유형 및 요소 인스턴스의 동일한 속성 이름에 따라 인스턴스의 속성과 일치하는 속성 이름을 역 직렬화합니다.

properties 개체에 정의 된 다른 속성 옵션이없는 경우 지정된 유형을 속성 값으로 직접 설정할 수 있습니다. 그렇지 않으면 속성 구성 개체의 유형 키에 값을 제공합니다.

부울 속성 구성

Boolean 속성은 false로 설정하여 마크 업에서 구성 할 수 있으며 true로 설정하면 값이 있거나없는 속성이 true로 같기 때문에 마크 업에서 구성 할 수 없습니다. 따라서 웹 플랫폼에서 속성에 대한 표준 동작으로 알려져 있습니다.

객체 및 배열 속성은 JSON 형식으로 다음과 같이 전달하여 구성 할 수 있습니다.

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

기본 속성 값 구성

기본 속성은 속성 개체의 값 필드를 사용하여 구성 할 수 있으며 기본 값이거나 값을 반환하는 함수일 수 있습니다.

다음 예제는 properties 개체에서 기본 속성 값을 구성하는 방법을 보여줍니다.

<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로 설정하여 생성 된 데이터에 대한 예기치 않은 변경을 방지 할 수 있습니다. 요소는 속성 값을 변경하기 위해 _setProperty (value) 규칙의 setter를 사용합니다.

다음 예제는 properties 개체에서 읽기 전용 속성의 사용을 보여줍니다. 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이라는 파일을 하나 더 만들고 다음 코드를 추가합니다.

//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 − 표시된 값이없는 속성을 참 또는 거짓으로 설정합니다.

  • Array or Object − JSON.stringify를 사용하여 값을 직렬화합니다.