점등: 사용 방법

Lit는 기존 프로젝트에 쉽게 추가할 수 있습니다.
실제로 Lit 구성요소는 모든 JavaScript 프레임워크, 템플릿 서버 시스템 및 CMS에서 작동합니다.

실제로 Lit 구성요소는 HTML, DOM API 또는 템플릿에서 직접 사용할 수 있습니다.
대부분의 자바스크립트 프레임워크는 웹 구성요소 및 Lit를 훌륭하게 지원하므로 요소 정의를 가져오고 템플릿에서 요소 태그 이름을 사용하기만 하면 됩니다.

먼저 npm을 사용하여 명령줄에서 Lit 패키지를 설치합니다.

npm i lit

JSX를 사용하여 모든 프로젝트 폴더에서 새 항목을 만들 수 있습니다.

JSX는 템플릿을 만드는 데 사용되는 언어입니다. JavaScript 구문의 확장입니다.



Lit 구성요소는 사용자 인터페이스의 재사용 가능한 부분입니다. 상태에 따라 사용자 인터페이스를 표시하는 상태가 있는 일종의 컨테이너입니다.
UI 구성 요소에서 기대할 수 있는 것은 무엇이든 사용자 입력에 반응하고 이벤트를 트리거할 수 있습니다.
Lit 구성요소는 HTML 요소이므로 모든 표준 요소 API를 포함합니다.

LitElement를 확장하는 클래스를 만들고 브라우저에 등록합니다.


TS에서 @customElement 데코레이터는 브라우저에 사용자 정의 요소 클래스를 등록하고 요소 이름(이 경우 단순 인사말)에 바인딩하는 customElements.define 호출의 약어입니다.

그렇지 않으면 JS를 사용할 수 있습니다.


Lit 구성요소를 정의하면 맞춤 HTML 요소가 정의됩니다. HTML 요소처럼 새 요소를 사용할 수 있습니다.




기본 클래스 LitElement는 HTMLElement의 하위 클래스이므로 Lit 구성요소는 HTMLElement 표준 메서드의 모든 속성을 상속합니다.

특히 LitElement는 ReactiveElement에서 상속합니다.
반응 속성을 구현하고 HTMLElement에서 상속합니다.

TypeScript는 태그 이름을 기반으로 일부 DOM API에서 반환된 HTML 요소의 클래스를 유추합니다.

예를 들어 document.createElement('img')는 문자열 유형의 src 속성이 있는 HTMLImageElement 인스턴스를 반환한다는 것을 알고 있습니다.

맞춤 요소는 HTMLElementTagNameMap으로 매핑을 추가하여 동일한 처리를 얻을 수 있습니다.



이러한 방식으로 다음 코드는 유형 검사를 올바르게 수행합니다.


모든 요소에 HTMLElementTagNameMap 항목을 추가하는 것이 좋습니다.
TypeScript에서 생성하고 npm 패키지에 .d.ts 유형을 게시합니다.

See here