728x90 반응형 Web Components5 [Stencil]컴포넌트 구성 셋 컴포넌트 사용 class 값과 text를 인자로 받는 간단한 컴포넌트를 생성해봅시다. 인자 값을 받기 위해 스텐실에 내장된 Prop를 임포트해주고, tdList 클래스 내부에 text와 class를 문자열로 선언해줍니다. render되는 마크업에 Prop로 선언된 요소를 this를 붙여 배치 시킵니다. import { Component,h,Prop } from '@stencil/core'; @Component({ tag: 'td-list', styleUrl: './td-list.css', shadow: true }) export class tdList { @Prop() text: string ; @Prop() class: string ; render() { return ( {this.text} ); } .. 2024. 1. 3. [Stencil]Web components API Web components API Stencil에서 제공하는 전체 API는 데코레이터, 수명 주기 후크 및 렌더링 방법 집합으로 압축될 수 있습니다. 데코레이터 데코레이터는 구성 요소에 대한 모든 메타데이터, 구성 요소가 노출할 수 있는 속성, 특성 및 메서드, 내보낼 수 있는 이벤트 또는 관련 스타일시트를 수집하기 위해 스텐실에서 사용하는 순수한 컴파일러 시간 구성입니다. 모든 메타데이터가 수집되면 모든 데코레이터가 출력에서 제거되므로 런타임 오버헤드가 발생하지 않습니다. @Component()는 새로운 웹 구성요소를 선언합니다. @Prop()은 노출된 속성/속성을 선언합니다. @State()는 구성 요소의 내부 상태를 선언합니다. @Watch()는 속성이나 상태가 변경될 때 실행되는 후크를 선언.. 2024. 1. 3. web components :part() part의 값을 정의하여 사용하면 CSS가 ::part 요소를 통해 쉐도우 트리의 특정 요소를 선택하고 스타일을 지정할 수 있습니다. 하지만 사파리에서 호환이 어렵다는 문제가 있어요(exportparts) css는 다음과 같이 사용하고 :host{ &::part(part){ color:red; } } 웹컴포넌트에서 사용은 파트 버튼 아래와 같이 exportparts도 사용할 수 있지만 사파리에서 적용이 안됩니다. 쉐도우 돔 하위 요소의 스타일을 지정할 때 사용하지만 호환이 안된다는 단점이 있어서 사용을 안하고 있어요 파트 버튼 2024. 1. 3. Webcomponents 에서 css사용 host가 open이라는 속성을 가질때 다음과 같이 정의한다. :host([open]) { display:block } host가 main이라는 클래스를 가지고, 내부 slot에 배치된 slot이라는 클래스개체의 스타일을 정의하고 싶을때는 다음과 같습니다. :host(.main){ background: blue; ::slotted(.slot){ background: red; } } host 내부 콘텍스트가 div에 스타일을 적용하고 싶을때는 다음과 같습니다. :host-context(div){ color:yellow; } 참 쉽죠? 2024. 1. 2. [Stencil]Stenciljs 프로젝트 시작하기 Stencil: 웹 구성 요소 컴파일러 Stencil은 Web components를 생성하는 컴파일러입니다. Stencil은 가장 널리 사용되는 프레임워크의 최고의 개념을 간단한 빌드 시간 도구로 결합합니다. Stencil은 TypeScript, JSX 및 CSS를 사용하여 고품질 구성 요소 라이브러리를 만드는 데 사용할 수 있는 표준 호환 웹 구성 요소를 만듭니다. Stencil로 생성된 Web components는 즉시 사용 가능한 인기 프레임워크와 함께 사용할 수 있습니다. 또한 Stencil은 프레임워크별 개발자 환경에서 Stencil 구성 요소를 사용할 수 있도록 하는 프레임워크별 래퍼를 생성할 수 있습니다. Stencil의 주요 목표는 디자인 시스템과 구성 요소 라이브러리를 위한 놀라운 도구.. 2024. 1. 2. 이전 1 다음 728x90 반응형
