우리는 지난 시간 customElement를 생성하는 방법을 확인하였다. 하지만 지금까지 포스팅한 내용만 가지고는 웹 컴포넌트을 만들기에는 역부족 일 것이다.
가장 첫번째 문제로 직면할 내용이 위처럼 외부 css 정의 역시 내부 엘리먼트에 영향을 끼친다는 것이다. 이는 css를 작성함에 있어서 커스텀 엘리먼트의 하위 속성인지 전부 확인하며 피해서 css정의를 해야 한다는 게 큰 문제이다.브라우저는 우리가 작성한 html tag들을 가지고 DOM tree를 생성한다. 예시는 아래와 같다.
<html>
<head></head>
<body>
<div>div 1</div>
<div>div 2<div>div 2 - 1</div><div>div 2 - 2</div><div>div 2 - 3</div></div>
</body>
</html>
TreeWalker.parentNode()
TreeWalker.firstChild()
TreeWalker.lastChild()
TreeWalker.previousSibling()
TreeWalker.nextSibling()
TreeWalker.previousNode()
TreeWalker.nextNode()
위는 TreeWalker 오브젝트가 지원하는 함수이다.
출처: https://developer.mozilla.org/ |
참고 위와 같이 shadow dom을 사용 하지 않은 트리를 light tree라고 말하겠다.
Shadow DOM
Shadown DOM을 사용하게 되면 light tree와 구분 된 새로운 트리 shadow tree를 만들수 있게 된다. 이건 일반적으로 html에 태그로써 명시되어 있지 않으며, light tree와 구문 된 영역을 만들 수 있다.
<body> <my-element></my-element> </body>
위를 간단하게 트리로 그려본다면 아래와 같은 tree를 그려볼 수 있겠다.
자 그러면 TreeWalker를 이용 하여 Body에서 부터 Shadow Root로 탐색을 실험 해보자.shadow-root를 시작하여 부모와 자식을 확인해 보았을 때에는 my-element에는 접근하지는 못하였지만, 자식은 shadow node - 1에는 접근 가능 했고,
shadow node - 1에서 부모를 접근하였을 때에는 shadow-root를 접근 하지 못하는 것을 볼 수 있다. 위에 그려진 트리에 treeWalker 경계를 추가하여 나타내보자.
treeWalker의 경계대로 tree에 경계를 추가 해보았다. 위처럼 shadow tree가 하나 더 추가 된 것을 볼 수 있다.마무리
TreeWalker를 이용하여 DOM tree의 경계를 확실하게 되었다. 브라우저는 html를 DOM tree로 파악한다고 말씀드렸는데, 브라우저에서의 css적용도 DOM tree에 따라서 적용 된다고 생각 하면 된다. id, class, name등도 light tree에서는 확인이 불가능 하기 때문에 독립적으로 적용 할 수 있다. 다음번 포스팅에는 Shadow DOM에 대해서 포스팅 해보도록 하자.
댓글
댓글 쓰기