쉐도우 돔(Shadow DOM) JavaScript
쉐도우 돔(Shadow DOM)이란
- DOM(Document Object Model)은 HTML의 문서화된 표현이다. 그리고 HTML 문서의 모든 요소와 스타일로 이루어진 DOM은 하나의 큰 글로벌 범위 내에 있다.
- Shadow DOM은 DOM안의 DOM으로 생각하기 쉬우나 원래의 DOM 트리에서 완전히 분리된 고유의 요소와 스타일을 가진 DOM 트리이다.
- HTML에 input 태그를 작성하면 아래와 같은 Output을 어떠한 방식으로 만들었느냐는 div태그 여러 개를 이용하여 Shadow-root안에 지정되어있다
<input type="range">
즉 브라우저를 확인하는 고객은 볼 수없지만 실제 값안에 저장되어있는 요소들을 칭한다고 할 수 있다. 또한 이러한 Shadow DOM요소들은 글로벌 범위에 포함되지 않는다.
shadow DOM 볼 수 있게 설정하는 법
Shadow DOM을 확인하는 방법은 간단한데 개발자툴을 열어서 설정에 Shadow DOM을 보여주는 설정에 체크하면 된다.
Shadow DOM 만드는법
<body>
<div id="그림자"></div>
<script>
document.querySelector('#그림자').attachShadow({mode : 'open'}) //shadowRoot 생성
document.querySelector('#그림자').shadowRoot.innerHTML =
'<p>쉐도우돔</p>' //p태그로 글자를 생성
</script>
</body>사용하는 이유
Shadow DOM은 글로벌 범위에 포함되지 않는다. 이 점을 이용하여 Web Components와 함께 사용하면 HTML 모듈화가 가능하다. 즉 따로 독립되어 지정되어 있으므로 태그를 이용한 CSS 작업을 하여도 ShadowRoot 안에 있는 요소들은 영향을 받지 않는다.
사용법
모듈을 이용하고 싶다면 라이브러리를 사용하는 것이 더 편하지만 개인적인 모듈을 만들고 싶다면 template이라는 태그를 이용하는 것이 좋다.
<template></template> - 임시 HTML 보관함
template라는 태그 안에 HTML을 작성하면 그 안의 요소들은 밖으로 보이지 않고 따로 id를 지정하여 사용할 수도 있다.
<body>
<custom-module></custom-module>
<template id="myModule">
<p>개인 모듈</p>
<input type="range" />
</template>
<script>
class module extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: "open" });
this.shadowRoot.append(myModule.content.cloneNode(true));
}
}
customElements.define("custom-module", module);
</script>
</body>
'JavaScript' 카테고리의 다른 글
| 객체(Object) - JavaScript (0) | 2022.02.13 |
|---|---|
| 엄격 모드(Strict Mode) - JavaScript (0) | 2022.02.09 |
| 프로토타입(Prototype) - JavaScript (0) | 2022.01.28 |
| 이벤트 버블링(Event Bubbling) - JavaScript (0) | 2022.01.23 |
| 호이스팅(Hoisting) - JavaScript (0) | 2022.01.20 |
