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>