웹 컴포넌트에 대하여. -polymer, LitElement의 목적과 장점-

-Polymer란 무엇인가?-

폴리머 라이브러리는 기존 웹 컴포넌트를 쉽게 만들기 위해 만들어진 라이브러리이자, 별도의 문법을 가진 프레임워크'였'다.
(polymer는 비교적 빡빡한 문법이 존재하여 사실상 웹 컴포넌트와는 독립적인 별개의 개념으로 생각해야했다.)

 

현재는 LitElement라는 이름으로, 더 작고 가벼운 라이브러리가 되어 polymer를 계승하므로 polymer가 아닌 lit element라 부르는게 맞다.

 

 

 

-lit Element란 무엇인가?-

lit Element로 오면서 목적에 따라 2가지로 분리되었다.

lit-element
lit Element는 lit-html을 렌더링 엔진으로 사용하는 프레임워크다.
lit-html
lit html은 DOM 렌더링을 처리하는 라이브러리이다.(ex : jsx) 

-둘의 차이 -

lit-html은 lit-element에 포함되는 라이브러리이다.
이전 글에서 웹컴포넌트는

 

커스텀 엘리먼트, 

쉐도우돔, 

html 템플릿으로 나뉜다고 했는데,

 

lit-element는 웹컴포넌트를 대체하며, lit-html은 html 템플릿을 대체한다고 보면 되겠다.

---

lit element를 Vue에 적용하고싶다면 아래와 같은 과정이 필요하다.

npm install lit-element

이후 

1. 컴포넌트 생성(js에 import {LitElement, html} from 'lit-element'; 이후 litElement 문법에 따라 정의)
2. 추가하고싶은 위치에 import '../LitElement/my-element.js'; 이후 태그 추가

 

이처럼 아주 심플하고 가볍다.

---

-lit-element의 장점-

그렇다면 굳이 웹개발 표준인 커스텀 엘리먼트 대신 lit-element, lit-html을 사용하는 이유가 무엇일까?


lit-element 에서는 life-cycle이 커스텀 엘리먼트보다 좀더 세분화 되어있다.
(lit-element.polymer-project.org/guide/lifecycle)

 

커스텀 엘리먼트의 attributeChangedCallback 은 lit-element에서 제공하는 update 메소드에 일대일 대응되는 것처럼 보이지만,
shoudUpdate, performUpdate, requestUpdate와 같이 좀더 다양한 상황에 적용할 수 있다는 점이 장점이라고 할 수 있다.

lit-html은 기존 html 템플릿과 다르게 템플릿에 요소를 동적으로 부여하거나 스타일을 부여하거나, 제한적인 렌더링, 비동기 렌더링 등을 사용할 수 있다.

 

 

그 외에도 수많은 디테일에서 더 나은 퀄리티를 보여준다.