[Ionic 5] Shadow Dom 이란?

# Shadow Dom이란?

Ionic이 제공하는 Ui Component는 기본적으로, 외부에서 Style 에 접근 할 수 없도록, encapsulation이 되어 있고, 그것은 shadow dom으로 덮어씌워지는 형태로 이루어진다.

<ion-button></ion-button> //컴포넌트 내부에 .button 클래스가 존재하지만, 접근해서 수정이 불가능하다.

<ion-select>

  #shadow-root //보이지 않지만, 태그 존재

    <div class=”select-text select-placeholder”></div>

    <div class=”select-icon”></div>

</ion-select>

/* Does NOT work */ //적용되지 않는다.

ion-select .select-placeholder {

  color: blue;

}

# Shadow Parts란?

Shadow parts allow developers to style inside a shadow tree, from outside of that shadow tree. In order to do so, the part must be exposed and then it can be styled by using ::part.

part 라는 directive를 통해, 외부에서 내부 엘리먼트에 대한 스타일 수정이 가능하도록 통로를 마련해주고 있다.

<ion-select>

  #shadow-root

    <div part=”placeholder” class=”select-text select-placeholder”></div>

    <div part=”icon” class=”select-icon”></div>

</ion-select>

ion-select::part(placeholder) {

  color: blue;

  opacity: 1;

} //적용 가능

ion-select::part(placeholder)::first-letter {

  font-size: 22px;

  font-weight: 500; //shedo element 문법도 적용 가능하다.,

}

# 셰도 클래스란?

선택된 element의 구체적인 일부분에만 스타일을 적용할 때 사용되는 문법이다. css 문법이 제공한다. 예를 들면 ::first-letter ::first-line 등이 있다.

# part 문법이 사용될 수 있는 경우?

- Ionic이 공식적으로 제공하는 ui component

- ion-card-header 같은 경우 shadow element 임에도, host-element에서 모든 스타일을 받아오기 때문에,  parts 적용이 필요없다.

ion-item::part(native):hover { //가장 많이 사용되는 형식이다.
  color: green;
}