lit element
1.0.0
lit-html을 사용하여 웹 구성 요소를 생성하기위한 기본 클래스
lit-element Lit-HTML-Element NPM 패키지를 통해 설치할 수 있습니다.
lit-element 사용하면 JavaScript 템플릿 리터럴로 표현 된 HTML 템플릿으로 웹 구성 요소를 생성하고 해당 템플릿을 DOM으로 효율적으로 렌더링하고 재 렌더링 할 수 있습니다 .
lit-element Lit-HTML을 통합하여이를 달성하며 다음과 같은 기능이 있습니다.
render() 메소드를 구현하여 쉬운 렌더링renderCallback 통해 가능한 사전/게시물 렌더링 후크invalidate() 호출하여 수동으로 재 렌더링을 트리거합니다.this 문제 또는 파괴를 사용하는 속성 및 방법에 액세스하십시오id 에 의한 요소의 쉬운 쿼리 this.$(...)데모는 여기에서 찾을 수 있습니다.
render() 메소드를 작성하여 lit-html 사용하여 HTML 코드를 간단하게 작성하십시오.
import { LitElement , html } from '/src/lit-element.js' ;
class HelloWorld extends LitElement {
render ( ) {
return html `
< div style =" font-weight: bold " > Hello World </ div >
` ;
}
}
customElements . define ( 'hello-world' , HelloWorld ) < hello-world > </ hello-world >id 로 요소 쿼리 내용이 처음으로 렌더링 된 후 (예 : connectedCallback() Fires 이후)이 id 를 사용하여 Shadow Root의 요소에 액세스 할 수 있습니다 this.$(...) .
아래 예제에서는 버튼을 누를 때마다 this.changeColor() 호출합니다 this.$("wrapper") 사용하여 div에 액세스하고 배경색을 수정합니다.
class ColorMarker extends LitElement {
changeColor ( ) {
const color = Math . random ( ) . toString ( 16 ) . substr ( 2 , 6 ) ;
// Easily query the element by id:
this . $ ( "wrapper" ) . style . backgroundColor = `# ${ color } ` ;
}
render ( ) {
return html `
< style >
div {
background-color: yellow;
}
</ style >
< button on-click = ${ ( ) => this . changeColor ( ) } >
Change background color
</ button >
< div id =" wrapper " > < slot > </ slot > </ div >
` ;
}
}
customElements . define ( 'color-marker' , ColorMarker ) ; < color-marker > Horse </ color-marker > 이 예에서는 속성을 사용합니다. 정적 Getter properties() 에 정의 된 모든 속성은 수정 된 시점에 컨텐츠가 적시에 다시 렌더링되도록합니다.
속성은 기본값을 가질 수 있으며 속성을 통해 심지어 반영 될 수도 있습니다 (변경 사항은 두 가지 방법으로 진행). upper-case 대 upperCase 와 같은 특수 규칙 후에 마법을 수행하고 사례를 변환하는 대신, 부동산이 반영되어야하는 속성 이름을 정의하므로 모호성을 피하십시오.
속성을 사용하는 경우 요소를 사용하기 전에 this.withProperties 호출해야합니다. 메소드가 클래스 자체를 반환 할 때 customElements.define(...) 의 일부로 수행 할 수 있습니다.
참고, 속성 기본값은 요소 속성 자체 (현재 또는 누락)에서 설정되므로 '값'을 통해 설정된 기본값은 무시됩니다.
import { LitElement , html } from '/src/lit-element.js' ;
class HelloWorld extends LitElement {
static get properties ( ) {
return {
uppercase : {
type : Boolean ,
attrName : "uppercase"
}
}
}
render ( ) {
return html `
< style >
.uppercase {
text-transform: uppercase;
}
</ style >
< div id =" box " class$ =" ${ this . uppercase ? 'uppercase' : '' } " >
< slot > Hello World </ slot >
</ div >
` ;
}
}
customElements . define ( 'hello-world' , HelloWorld . withProperties ( ) ) ; < hello-world > </ hello-world >
< hello-world uppercase > ¡Hola, mundo! </ hello-world > 사용자 정의 요소를 만들 때 좋은 패턴은 메소드 나 속성 대신 속성을 사용하는 것입니다. 이를 통해 <my-dialog opened> 와 같은 요소를 선언적으로 사용할 수 있습니다.
다른 사용자 정의 요소에서만 내부적으로 소비되는 사용자 정의 요소의 경우 속성에 의존하는 경우가 종종 있습니다. 배열이나 객체와 같은 복잡한 데이터를 통과 해야하는 경우에도 마찬가지입니다.
속성으로 쉽게 작업 할 수 있도록 lit-html-element 속성의 이름을 정의하여 속성과 속성 간의 매핑을 지원합니다 attrName:
속성의 존재 여부 (요소에) 실제 값 , 즉 (요소)가 발생합니다. 부울 속성의 경우 누락 된 속성은 속성이 false 이고 다른 모든 속성 유형에 대해 undefined 의미합니다. 이는 속성에 속성을 매핑 할 때 속성의 존재에 따라 값이 항상 정의되는 기본값과 같은 것은 없음을 의미합니다. 이것은 attrName: 존재하는 경우 설정 value: 무시된다는 것을 의미합니다.
값은 유형 생성자, 즉 String 에 대한 Number Number(attributeValue) String(attributeValue) 사용하여 변환됩니다.
Boolean 웹 플랫폼의 패턴을 따르기 위해 특별한 취급을 가지고 있습니다.
HTML 표준에서 :
요소에 부울 속성의 존재는 실제 값을 나타내며, 속성의 부재는 잘못된 값을 나타냅니다.
속성이있는 경우, 값은 빈 문자열이거나 aSCII의 사례에 민감하지 않은 값이어야하며 속성의 표준 이름에 대한 선행 또는 후행 공백이없는 값이어야합니다.
Array 및 Object 는 속성에 대해 무질서하고 특수 처리가 없으므로 부울을 제외한 다른 값 유형으로 생성자를 사용하여 값이 변환됩니다.
this 당신을 위해 렌더 ()로 전달됩니다. 특히 파괴 할 때. 그래도 여전히 수동으로 참조 할 수 있습니다.
class RenderShorthand extends LitElement {
static get properties ( ) {
return {
greeting : {
type : String ,
value : "Hello"
}
}
}
render ( { greeting } ) {
return html ` ${ greeting } World!` ;
}
}
customElements . define ( 'render-shorthand' , RenderShorthand . withProperties ( ) ) ; properties() 의 속성이 변경되면 lit-element 자동으로 재 렌더링됩니다. attrName 통해 속성에 매핑 된 속성도 마찬가지입니다.
수동으로 다시 렌더링 해야하는 경우 호출을 통해 invalidate() . 이렇게하면 다음 requestAnimationFrame 직전에 컨텐츠를 렌더링하는 마이크로스크를 예약합니다.
작동하기 전에 사용자 정의 요소를 업그레이드해야합니다. 이는 필요한 모든 리소스가있는 경우 브라우저에서 자동으로 발생합니다.
이는 다른 사용자 정의 요소에 의존하는 사용자 정의 요소를 수행하고 데이터 흐름에 속성을 사용하는 경우 요소가 업그레이드되기 전에 해당 속성을 설정하면 lit-html-element 속성을 섀도 잉으로 표시하여 속성 업데이트 및 속성 반사가 예상대로 작동하지 않음을 의미합니다.
모든 종속성이 업그레이드 될 때까지 대기 할 수 있도록이 문제를 해결하기위한 ALBALLDEFINED whenAllDefined(result, container) 가 있습니다. 이를 사용하는 한 가지 방법은 renderCallback() 덮어 쓰는 것입니다.
renderCallback ( ) {
if ( "resolved" in this ) {
super . renderCallback ( ) ;
} else {
whenAllDefined ( this . render ( this ) ) . then ( ( ) => {
this . resolved = true ;
this . renderCallback ( ) ;
} ) ;
}
}그러나 업그레이드되기 전에 수동으로 설정하면 속성을 섀도우 할 수 있습니다.
document . getElementById ( 'ninja' ) . firstName = "Ninja" ;그러니 이것들과 다음과 같은 방법을 보호하십시오.
customElements . whenDefined ( 'computed-world' ) . then ( ( ) => {
document . getElementById ( 'ninja' ) . firstName = "Ninja" ;
} ) ;계산 된 속성이 필요하고 다른 속성에 따라 업데이트되는 경우 '계산 된'값을 사용하여 가능하며 인수가 문자열로 인수를 정의했습니다.
계산 된 속성은 모든 종속 속성이 정의 될 때만 업데이트됩니다. 기본값은 value:
계산 된 속성은 속성에 반영 될 수 없습니다.
예를 들어.
import { LitElement , html } from '/node_modules/lit-html-element/lit-element.js' ;
class ComputedWorld extends LitElement {
static get properties ( ) {
return {
firstName : {
type : String ,
attrName : "first-name"
} ,
doubleMessage : {
type : String ,
computed : 'computeDoubleMessage(message)'
} ,
message : {
type : String ,
computed : 'computeMessage(firstName)' ,
value : 'Hej Verden'
}
}
}
computeDoubleMessage ( message ) {
return message + " " + message ;
}
computeMessage ( firstName ) {
return `Konichiwa ${ firstName } ` ;
}
render ( ) {
return html `
< div style =" font-weight: bold " > ${ this . doubleMessage } </ div >
` ;
}
}
customElements . define ( 'computed-world' , ComputedWorld . withProperties ( ) ) < computed-world > </ computed-world >
< computed-world first-name =" Kenneth " > </ computed-world > JavaScript 대신 TypeScript에서 lit-html-element 사용할 수 있습니다. TypeScript를 사용하는 경우 정적 특성 Accesties static get properties() 정의하는 대신 데코레이터 사용을 선택할 수 있습니다.
속성 데코레이터를 사용하는 경우 이러한 정적 속성 액세서는 무시되며 .withProperties() 도 호출 할 필요가 없습니다.
import {
LitElement ,
html ,
TemplateResult ,
customElement ,
property ,
attribute ,
computed
} from '../../src/lit-element.js' ;
@ customElement ( 'test-element' )
export class TestElement extends LitElement {
@ computed ( 'firstName' , 'lastName' )
get fullName ( ) : string {
return ` ${ this . firstName } ${ this . lastName } ` ;
}
@ property ( ) firstName : string = 'John' ;
@ property ( ) lastName : string = 'Doe' ;
@ property ( ) human : boolean = true ;
@ property ( ) favorite : any = { fruit : 'pineapple' } ;
@ property ( ) kids : Array < string > = [ 'Peter' , 'Anna' ] ;
@ attribute ( 'mother' ) mother : string ;
@ attribute ( 'super-star' ) superStar : boolean ;
render ( ) : TemplateResult {
return html `
< h2 > Name: ${ this . fullName } </ h2 >
< h2 > Is human?: ${ human ? "yup" : "nope" } </ h2 >
< h2 > Favorites: ${ JSON . stringify ( this . favorite ) } </ h2 >
< h2 > Kids: ${ JSON . stringify ( this . kids ) } </ h2 >
< h2 > Mother: ' ${ this . mother } ' </ h2 >
< h2 > Superstar?: ' ${ this . superStar } ' </ h2 >
` ;
}
} < test-element super-star mother =" Jennifer " > </ test-element > TypeScript에서 데코레이터를 사용하려면 tsconfig.json 에서 experimentalDecorators 컴파일러 설정을 활성화하거나 --experimentalDecorators 플래그를 사용해야합니다.
{
"compilerOptions" : {
"experimentalDecorators" : true
}
}위의 활성화를 사용하면 데코레이터 사용을 시작할 수 있지만 수동으로 유형 정보를 지정해야합니다.
@ property ( { type : String } )
myProperty: string ;유형은 종종 속성, 특히 유형을 정의하는 TypeScript에서 파생 될 수 있으므로 이것은 약간의 이중 작업처럼 느껴집니다. 운 좋게도이 문제를 해결하는 것을 목표로하는 메타 데이터 반사라는 새로운 사양 제안이 있습니다. 이 제안은 아직 TC39 실무 그룹 (JavaScript 표준 정의)에 공식적으로 제안되지 않았지만 이미 사용 가능한 폴리 필드 및 실험적 지원이 있습니다.
메타 데이터 반사가 활성화되면 속성 유형을보다 간결하게 정의 할 수 있습니다.
@ property ( ) myProperty: string ;TypeScript에서 데코레이터를 사용하려면 다음 단계를 따르십시오.
tsconfig.json 에서 emitDecoratorMetadata 컴파일러 설정을 활성화하거나 --emitDecoratorMetadata 플래그를 사용해야합니다. {
"compilerOptions" : {
"emitDecoratorMetadata" : true
}
}$ npm install --save-dev rbuckton/reflect-metadata < script src =" /node_modules/reflect-metadata/Reflect.js " > </ script >다음 API 문서는 Web IDL을 사용합니다.
PropertyOptions PropertyOptions는 사용자 정의 요소의 속성을 구성하는 데 사용됩니다. JavaScript에서는 properties 라는 정적 속성 액세서를 구현해야하며, 해당 객체의 각 속성이 관련 PropertyOptions 갖는 객체를 반환합니다.
class {
static get properties ( ) {
return { selfDefinedObjectProperty : ... }
}
} PropertyOptions 사전에는 아래 웹 IDL 형식으로 표시되는 4 개의 선택적 특성이 있습니다.
typedef (BooleanConstructor or DateConstructor or NumberConstructor or StringConstructor or ArrayConstructor or ObjectConstructor) PropertyType ;
dictionary PropertyOptions {
attribute PropertyType type ;
attribute any value ;
attribute USVString attrName ;
attribute USVString computed ;
}type 속성 type 속성은 데코레이터와 메타 데이터 반사를 사용할 때만 선택 사항입니다.
value 속성 value 속성은 속성의 기본값을 정의합니다. attrName 통한 속성 / 속성 매핑의 경우 (아래 참조) value 무시됩니다. 데코레이터를 사용할 때 값은 속성 정의 자체에서 가져온 것입니다.
@ property ( ) myProperty: string = "Hello World" ; attrName 속성 attrName 속성과 다른 방법으로 반영되어야하는 속성의 이름을 정의합니다. attrName 사용하면 기본값이 무시되고 대신 사용자 정의 요소에서 결정됩니다. 속성의 존재 여부에 따라.
속성 이름은 '-'(하이픈)를 포함하여 라틴어 문자 (AZ)입니다. HTML 문서의 HTML 요소의 모든 속성은 자동으로 ASCII-Lowercased를 받고 초기 하이픈 ( '-')은 무시됩니다.
데이터 속성이라는 점에 유의하십시오. data- 로 시작하는 속성은 element.dataset 통해 자동으로 속성으로 액세스 할 수 있습니다.
매핑 된 속성이 요소에 설정되면 새 값이 undefined 되지 않으면 속성이 새 값의 문자열 표현으로 속성이 업데이트됩니다.
부울 속성이 다르게 반영되어 있기 때문에 이것에 대한 한 가지 예외가 있습니다. 속성을 true 로 설정하고 속성 (예 : attr ) <div attr> 빈 '' 로 설정됩니다. 속성을 false 로 설정하면 속성이 제거됩니다 (즉). <div> .
속성이 설정되면 값은 유형 생성자, 즉 String 에 대한 String(attributeValue) Number(attributeValue) attributeValue)을 사용하여 변환됩니다 Number
Boolean 웹 플랫폼의 패턴을 따르기 위해 특별한 취급을 가지고 있습니다.
HTML 표준에서 :
요소에 부울 속성의 존재는 실제 값을 나타내며, 속성의 부재는 잘못된 값을 나타냅니다.
속성이있는 경우, 값은 빈 문자열이거나 aSCII의 사례에 민감하지 않은 값이어야하며 속성의 표준 이름에 대한 선행 또는 후행 공백이없는 값이어야합니다.
위의 속성 반사 섹션에서 자세한 내용을 읽으십시오.
computed 속성 속성은 computed 다른 속성으로부터 계산 될 수 있으며, 'methodName(property1, property2)' 과 같은 문자열이 필요합니다. 여기서 methodName 은 요소의 메소드이고 property1 및 property2 정의됩니다.
계산 된 속성은 모든 종속 속성이 정의 될 때만 업데이트됩니다. 기본값은 value:
계산 된 속성은 속성에 반영 될 수 없습니다.
renderCallback renderCallback 은 렌더링 전후에 맞춤형 후크를 허용합니다.
다른 속성을 기반으로 속성을 설정하는 것과 같이 렌더링 전에 추가 작업을 수행 해야하는 경우, 서브 클래스는 Render renderCallback() 전에 종속 속성을 설정하는 것을 포함하여 기본 클래스 호출 render() 전후에 작업을 수행하기 위해 RenderCallback ( render() 을 재정의 할 수 있습니다.
withProperties()TODO :
render(HTMLElement this)TODO : 문서를 여기로 이동하십시오
async invalidate()TODO : 문서를 여기로 이동하십시오
$(DOMString id)TODO : 문서를 여기로 이동하십시오
whenAllDefined(TemplateResult result)TODO : 문서를 여기로 이동하십시오
@customElement(USVString tagname)사용자 정의 요소를 등록하기위한 클래스 데코레이터
@ customElement ( 'my-element' )
class extends HTMLElement {
...
}@property(optional PropertyOptions options) lit-html-element 속성 시스템에 연결하기위한 속성 데코레이터.
속성 데코레이터를 사용하는 경우 정적 특성 액세서리 AccessiC STATIC static get properties() 정의 할 필요가 없습니다.
속성 데코레이터를 사용하는 경우 이러한 정적 속성 액세서는 무시되며 .withProperties() 도 호출 할 필요가 없습니다.
@ property ( { type : String } )
myProperty: string ;자세한 내용은 TypeScript의 확장자를 확인하십시오.
@attribute(USVString attrName) lit-html-element 속성 시스템에 연결하고 특성을 사용자 정의 요소 속성과 연결하기위한 속성 데코레이터.
자세한 내용은 attrName 속성을 확인하십시오.
@computed(any dependency1, any dependency2, ...) lit-html-element 속성 시스템에 연결하기위한 속성 데코레이터는 다른 속성에서 자동으로 컴퓨팅 된 속성을 만듭니다.
자세한 내용은 computed 속성을 확인하십시오.
@listen(USVString eventName, (USVString or EventTarget) target) 이벤트 리스너를 추가하기위한 메소드 데코레이터. 대상에 문자열을 사용할 수 있으며 해당 id 로 섀도우 루트의 요소를 검색합니다.
첫 번째 렌더링 후 이벤트 리스너가 추가되어 Shadow Dom을 생성합니다.
