Web Component
- Nest
- Development
- Category
- html/css
- Hit
- 390
- Star
- 0
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>