Shadow DOM는 캡슐화된 DOM으로 페이지에 독립적이다.
-
shadow dom 은 shadow root로 부터 시작한다.
-
shadow dom 안에 원하는 모든 요소를 부착 할 수 있다. 따라서 shadow root 내부에 html을 포함 할 수 있으며 이벤트 및 css와 함께 HTML DOM 구조로 작동 할 수 있다.
-
shadow dom은 캡슐화되어 페이지에 일반적인 dom에는 숨겨져 있다.
-
shadow root는 DOM에 연결된 shadow host에서만 액세스 할 수 있다.
일반 DOM에 Shadow DOM 생성하기
<!DOCTYPE html>
<html lang="kr">
<head>
<title>Shadow DOM</title>
</head>
<body>
<div id="shadowDiv"></div>
<script type="text/javascript">
let shadowRootEl = document.querySelector('#shadowDiv');
let shadowRoot = shadowRootEl.attachShadow({mode: 'open'});
let newEl = document.createElement('span');
newEl.innerText = "여기가 쉐도우 돔이양!";
shadowRoot.appendChild(newEl);
</script>
</body>
</html>
그냥 늙은 개발자