728x90 반응형 slotted2 [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. 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. 이전 1 다음 728x90 반응형
