지난 포스팅에 Shadow DOM이 어떠한 것인지 소개까지는 하였지만, 정작 사용법에 대해서는 언급을 하나도 하지 않았다. 이번 포스팅은 사용법 위주로 소개를 할 것이다.
기본 사용법은 매우 간단한 편이다.
<html lang="en">
<head></head>
<body>
<div id="app">loading...</div>
<script>
setTimeout(() => {
const app = document.getElementById('app')
const appTemplate = document.createElement('div')
appTemplate.innerHTML = `<h1>Hello World!</h1>`
const shadowRoot = app.attachShadow({mode: 'open'})
shadowRoot.append(appTemplate)
}, 3000)
</script>
</body>
</html>
엘리먼트에 attatchShadow함수는 실행하게 ShadowRoot의 인스턴스를 리턴한다.
ShadowRoot는 DocumentFragment를 상속 받는데, DocumentFragment는 우리가 사용하는 window.document의 클래스인 Document와 유사한 클래스라고 보면 된다.
간단하게 append 함수를 이용하여 컨텐츠를 채워줄 수 있다.
attatchShadow함수의 필수 속성은 mode로 'open', 'closed'양자 택일이다. 차이점이라고 하면 외부 스크립트에서 element.shadowRoot가 closed면 null, open이면 접근 가능하다 정도의 차이이다.
* 참고로 attatchShadow는 모든 엘리먼트에서 사용할 수는 없고, customElement와
article, aside, blockquote, body, div, footer, h1, h2, h3, h4, h5, h6, header, main, nav, p, section, span
엘리먼트에서 사용 할 수 있다.
Style적용
지난 시간에 ShadowDOM을 쓰는 소개 하면서 customElement에서 외부 css나 namd, id, class등의 분리가 되지 않는 다는 것을 포스팅 하였다.
ShadowDOM에서는 외부 도큐먼트와 내부 도큐먼트가 완전히 분리된 것 처럼 표현이 가능한것을 볼 수 있다.
<html lang="en">
<head>
<style>
h1 {
background: red;
}
#test {
color: purple;
}
</style>
</head>
<body>
<h1 id="test">hello world light tree</h1>
<div id="app">loading...</div>
<script>
const app = document.getElementById('app')
const appTemplate = document.createElement('div')
appTemplate.innerHTML = `
<style>
h1 {
color: blue;
}
#test {
background: green;
}
</style>
<h1 id="test">Hello World!</h1>
`
const shadowRoot = app.attachShadow({mode: 'open'})
shadowRoot.append(appTemplate)
</script>
</body>
</html>
마무리
ShadowDOM만 보면 외부 css와 분리된 영역을 만들고 싶다면 뭐 사용해도 OK이다. 하지만 ShadowDOM만을 사용한다는 것은 그렇게 좋은 선택은 아니다. 따라서 다음 포스팅에는 customElement와 같이 사용해보는 것을 포스팅 해보겠다.
댓글
댓글 쓰기