HTML 엘리먼트를 기능성을 추가하여 커스터마이즈한 엘리먼트를 이용하여 기능성을 추가할 수 있다.

개요에 관한 참고링크

• https://developer.mozilla.org/ko/docs/Web/Web_Components
• https://d2.naver.com/helloworld/188655
• https://www.webcomponents.org

react나 vue의 컴포넌트와 비슷한 형태를 가지고 있다.
Shadow DOM 을 이용하여 구조변화에 대한 유연한 대처를 기대할 수 있을것이다.

앞으로 이러한 형태의 엘리먼트가 개발되고 배포되면 퓨어 자바스크립트나 html 영역에 좀더 친숙하게 다가가지 않을까 예상되고, Web Component로 배포하고 사용하면 좋을거라고 생각도 든다.

스타일시트 셀렉터로 shadow-dom 요소 접근하기

쉐도우돔 내부요소에 스타일로 접근하는게 불가능한것은 아니다.
다만 내부에서 요소를 열어줘야 할듯..

<template id="custom-element">
<p part="foo">.foo</foo>
</template>
<custom-element></custom-element>

<style>
custom-element::part(foo) {}
</style>

출처
https://developer.mozilla.org/en-US/docs/Web/CSS/::part