Shadow DOM, CSS Selector

일반적인 DOM 은 CSS Selector 를 통해서 접근이 가능하다. (element, id, class)
그러나 Shadow DOM 은 일반적인 DOM 과는 다른 방식으로 CSS 를 조작해야한다.
보통 2가지 방식을 활용해서 Shadow DOM 내부의 CSS 를 조작한다.

첫번째는 part 어트리뷰트를 활용해서 조작하는 방식이다.
CSS 를 정의할 때 ::part(<indent>) 의 방식으로 의사 요소 를 통해서 Shadow DOM 내부의 엘리먼트에 접근할 수 있다.

다음은 예제이다.

<custom-element>
  <shadow-dom part="shadow-dom-select">
  </shadow-dom>
</custom-element>

위와 같이 선택자를 지정하려는 요소에 대해 part 어트리뷰트를 추가하여, 의사 요소를 통해 접근하도록 한다.

접근 방식은 다음과 같다.

custom-element::part(shadow-dom-select){
  background-color: red;
}

두번째로는 커스텀 css 변수(custom-css-variable) 선언 방식이다.

커스텀 css 변수는 부모 엘리먼트에서 자식 엘리먼트를 호출할 때, 해당 자식 엘리먼트의 Shadow DOM 내부에 있는 Custom-css-variable 에 접근할 수 있다.

이때 :host 를 재정의함으로서 변경할 수 있다.

방식은 다음과 같다.

먼저 Shadow DOM 내부의 Custom-css-variable 을 선언한다.

// Shadow DOM Element
<custom-element>
  <shadow-dom>
  </shadow-dom>
</custom-element>

// Shadow DOM CSS Sheet

shadow-dom {
  :host {
    --custom-shadow-dom-color: blue;
  }
  background-color: var(--custom-shadow-dom-color, black);
}

--custom-shadow-dom-color 이름으로 custom-css-variable 을 선언하였다.
다음으로, 부모 Element 에서custom-css-variable 에 접근해서 재정의해주면 된다.

// Parent Element CSS Sheet

:host {
  --custom-shadow-dom-color: red;
}

부모 Element 에서 Custom-css-variable 이 재정의되며, 자식 Element 의 Custom-css-variable 이 blue 에서 red 로 정의된다.
자식 Element 에서 부모 Element의 Custom-css-variable 을 재정의하려고 하는 것은 불가능하다.
이때는 부모 Element 의 CSS 를 오버라이딩해서 변경해줘야한다.

방식은 :host-context(<indent>) 를 통해서 처리한다.

:host-context(main){
  background-color: purple
}