attachShadow, shadowroot 사용시 css 의 특수 셀렉터

new
제한 사항
자식 TAG는 shadowroot  CSS로 제어 불가.
shadowroot Tag는 외부 CSS로 제어 불가.(예외 part 사용 시 가능)


내부CSS  :host // 현재 엘레멘트
자식 TAG <x-y></x-y>


shadowroot  <div part="partname"></div>
내부 CSS :host::part(partname){ }
외부 CSS x-y::part(partname){  }

내부CSS ::slotted(*)  //slot으로 추가된 모든 것.
외부에서 <x-y><div slot="z"></div></x-y>

shadowroot : <slot name="sl-handle"><div class="default-sl-handle">기본모양</div></slot>
자식 TAG : <div slot="sl-handle" class="custom-sl-handle"></div>
렌더링 : <slot name="sl-handle"><div slot="sl-handle" class="custom-sl-handle"></div></slot>


shadowroot : <slot></slot>
자식 TAG : <div>1</div><div>2</div><div>3</div>
slot 애트리뷰트가 없는 요소를 보여주는 용


외부 TAG에서 애트리뷰트 slot이 같으면 하나의 <slot></slot>에 여러개가 들어간다.

댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
제목 작성자 날짜
공대여자
공대여자
mins01
공대여자