Polymer 두번째 이야기 Try Polymer

원본글:https://www.polymer-project.org/2.0/start/quick-tour

Polymer는 웹 컴퍼넌트를 선언적으로 쉽게 만들수 있게 해줍니다.

새로운 웹 개발자들은 markdown으로 웹페이지에 커스텀 HTML을 간단하게 추가할 수 있습니다.

그냥 여러분이 익숙한 HTML tag를 사용하는 것과 같습니다.

<h1>A heading!</h1>

<fancy-thing>A fancy thing!</fancy-thing>

경험있는 개발자들은 Polymer의 특정 기능을 이용해 복잡한 코드들을 줄이고 보다 인터렉티브한 사용자 경험을 쉽게 만들수 있습니다. 이 과정에서는 다음과 같은 것들을 익힐수 있습니다.

• 요소 등록
• 라이프 사이클 콜백 사용
• 속성 관찰
• 템플릿으로 SHADOW DOM 만들기
• 데이터 바인딩 사용

이번 섹션에서는 Polymer Library를 설치없이 배울수 있습니다. 

샘플들을 보려면  아래의 Edit on Plunker 버튼을 누르세요

각 기능들을 보려면 아래의 탭 버튼을 클릭해 보세요

요소 등록

요소를 드록하기 Plymer.Lelement를 확장한 ES6 Class를 생성합니다. 

그리고 브라우저에서 새로운 요소를 등록하는 메서드 customElements.define를 호출합니다.

요소를 등록하면 요소 이름이 클래스와 연결되므로 특성 및 메서드를 사용자 정의 요소에 추가 할 수 있습니다. 사용자 정의 요소의 이름 은 ASCII 문자로 시작하고 대시 (-)를 포함해야합니다 .

custom-element.html

index.html

EDIT ON PLUNKER

<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">

<script>
  // Define the class for a new element called custom-element
  class CustomElement extends Polymer.Element {
    static get is() { return "custom-element"; }
    constructor() {
        super();
        this.textContent = "I'm a custom-element.";
      }
  }
  // Register the new element with the browser
  customElements.define(CustomElement.is, CustomElement);
</script>

Plunker 에서 시험해보십시오

• this.textContent의 내용을 수정해 보세요
• 브라우저 개발자 도구에 익숙하시면 콘솔에서 custom element의  tagName 속성을 찍어보세요
• 힌트: console.log(this.tagName);를 생성자함수에 넣어보세요

여기에서 샘플은 라이프 사이클의 콜백함수를 이용하여 초기화 과정에서 <custom-element> 의 내용물들을 생성하게 됩니다. 

custom 요소의 초기화가 끝나면 custom요소가 생성된후  ready 라이프사이클 콜백함수가 호출됩니다.

최초 한번 초기화 되어야 할 코드는 ready 라이프 사이클 콜백함수를 하세요