Shadow Root와 상속에 대하여

<details>
  <summary>요약</summary>
  <p>요약 내용 계속 보기 <br/> 요약 내용 계속 보기 </p>
</details>

<div>
  <p>요약 내용 계속 설명보기 <br/> 요약 내용 계속 설명보기 </p>
</div>

HTML로 위와 같이 마크업을 하면, details는 위와 같은 Shadow DOM 구성을 가지고 있기 때문에 아래와 같이 가상돔의 내용이 보여지게 됩니다.

<details>
  #shadow-root (user-agent)
  <slot name="user-agent-custom-assign-slot" id="details-summary">
    <summary>세부정부</summary>
    <summary> reveal
  </slot>
  <slot name="user-agent-default-slot" id="details-content">
    <p> reveal
  </slot>
  <summary>요약</summary>
  <p>요약 내용 계속 보기 <br> 요약 내용 계속 보기 </p>
</details>

개발자 도구의 요소검사(F12)에서 위와 같은 Shadow DOM들을 보신적이 있으실 겁니다.

여기서 신기한 점은 CSS를 다음과 같이 선언해도 box-sizing: border-box가 적용되지 않고 content-box로 적용된다는 점입니다.

* { box-sizing: border-box; }

이유

<details> → shadow root → <slot> → <summary> 와 같이 상속이 이어지지만 일반적으로 box-sizing: border-box는 상속 속성이 아닐 뿐더러 *로 찾아내는 속성에 <slot>은 포함되어 있지 않기 때문입니다.

 

해결방법

https://github.com/whatwg/html/issues/3748 웹와치 공식 이슈에서 계속해서 논의되고 있습니다.

파이어폭스에서는 예상되로 상속이 진행되어 적용되며, details > *와 같은 방법으로 우회하기도 합니다.

 

감사합니다.

 

출처 : https://kittygiraudel.com/2021/08/23/shadow-roots-and-inheritance/