[HTML] Shadow DOM 이란? (feat. 크롤링 실패)

크롤링을 하면서

아무리 해도 그런 element를 찾지 못한다는 에러가 나왔다.

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element

 

자세히 보니 shadow-root (closed) 라는게 적혀있었다.

보자마자 뭔지는 자세히 모르겠지만 얘가 에러의 원인임을 알 수 있었다.

 

그래서 Shadow-root 가 뭐야?

Shadow-root는 shadow DOM 트리의 Root 노드 이다.

 

Shadow DOM은 뭔데?

말 그대로 '숨겨진 DOM 트리'로 원하는 모든 element 안에 추가할 수 있다.

 

예를 들면, <video> tag를 사용할 때 DOM에서 보여지는 것은 단순히 <video> tag이지만 UI를 살펴보면 재생 버튼, 일시정지 버튼, progress bar 등 다양한 element가 있는데 이런 게 shadow DOM 내부에 포함되어 있다고 보면 된다!

 

 

 

※ Flattened Tree : 렌더링을 위해 평평해진 트리

   Shadow host : shadow DOM이 추가되는 일반 DOM의 노드. 즉, shadow root의 부모

   Shadow tree : shadow DOM 내부의 DOM 트리

   Shadow boundary : shadow DOM이 끝나고, 일반 DOM이 시작되는 장소

 

왜 사용하는데?

Shadow DOM은 element, style 등을 숨겨서 캡슐화를 할 수 있고,

다른 element class, id 와 겹치지 않도록 코드를 깨끗하게 유지할 수 있다. 

 

즉, shadow DOM을 사용하면 기존 DOM에서 분리되어

글로벌한 style이 적용되지 않는, 별도의 style을 적용할 수 있는 scope를 가질 수 있다!

 

shadow dom 생성 방법

attachShadow를 사용하여 shadow root를 생성할 수 있다.

여기서 mode는 open, closed를 작성할 수 있는데,

• open : Javascript를 사용하여 외부에서 shadow DOM에 접근 가능
• closed : 접근 불가능 (null 반환)

// shadow root 생성
let shadow = elementRef.attachShadow({mode: 'open'});
let shadow = elementRef.attachShadow({mode: 'closed'});

// p element를 shadow dom에 추가
let para = document.createElement('p');
shadow.appendChild(para);

https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow

Element.attachShadow() - Web APIs | MDN

 

 

그래서 결론은,

shadow-root (closed) 였기 때문에 크롤링을 할 수 없었다..🥲