2 of 27

Shadow Dom

Slot

Composed

ComposedPath

IsConnected

CustomElements

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

3 of 27

Part 1

Shadow Dom

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

4 of 27

Part 1

Shadow Dom

Shadow Dom 이란??

DOM의 구조를 가지고 있으나, 외부에 노출되지 않은 DOM

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

5 of 27

Part 1

Shadow Dom

웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것

실제 DOM을 추상화한 개념으로, 메모리 내에 가상으로 존재하는 DOM을 의미

외부에 노출되지 않은 DOM을 말하며, DOM의 구조를 캡슐화

할 때 사용

Dom

Virtual Dom

Shadow Dom

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

6 of 27

성능 문제 해결

(렌더링 속도 등)

라이브러리

사용(vue, react 등)

메모리에 전체

DOM의 사본 생성

명확한 독립 X

(외부 접근 가능)

Ex – css Deep selector

요소 캡슐화 주목적

(JS, CSS, HTML)

웹 브라우저

자체적 사용

DOM 요소의

하위 트리를

주 DOM 트리에 추가

명확한 독립 O

(외부 접근 불가)

Ex - 채널톡

기술의 목적

구현자

작동방식

기술의 기능

Part 1

Shadow Dom

Virtual Dom VS Shadow Dom

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

7 of 27

특징
1. 외부의 style은 적용되지 않는다.
2. 섀도 DOM을 추가하거나 접근하기 위해서는 별도의 방법이 필요하다.
3. 데코레이터에서 만들어진 Shadow Dom은 스크립트로 접근, 수정 불가.
4. Custom Element로 만들어진 섀도 돔은 스크립트로 수정 가능.
5. 일반적인 DOM은 DOM 트리가 렌더링 된 후 DOM트리가 수정 되서 비용이 크지만, Shadow DOM은 Shadow Host를 만나는 순간 렌더링 되기 때문에 비용을 줄일 수 있다. 🡺 즉, 별도 공간에서 렌더링(마치, iframe 처럼)

Part 1

Shadow Dom

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

8 of 27

Part 1

Shadow Dom

Shadow Dom - Render 모습

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

9 of 27

Part 2

Slot

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

10 of 27

Part 2

Slot

Slot 이란??

컴포넌트 내 HTML 태그를 위치 시킬 공간을 나타내는 용도로 사용되는

HTML Tag

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

11 of 27

Part 2

Slot

컴포넌트 내부 CODE

컴포넌트 호출 CODE

(Page)

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

12 of 27

Part 2

Slot

결과물(종합)

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

13 of 27

Part 3

Composed

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

14 of 27

Part 3

Composed

Composed 란??

Shadow Dom 경계를 넘어 표준 Dom으로 전파 되는지의 여부를

나타내는 속성(Boolean 값 반환)

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

15 of 27

Part 3

Composed

이미지

QA. 왜 필요할까?

1. 컴포넌트 내부 Custom Event 정의

2. 컴포넌트 확장

예상해보면, MyColorMenu 컴포넌트를 외부에서 사용시

close:menu(MyMenu에서 정의)라는 Custom Event를

상위 페이지에 정상적으로 전파하여 사용 가능하다 판단하지만, 불가하다

🡺 WHY?

CustomEvent의 경우 기본 Event(click, change 등) 인터페이스를 상속하며,

이로 인해 composed 속성의 기본값이 false 이다.(shadow root 상위 전파 x)

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

16 of 27

Part 3

Composed

이미지

QA. 그럼 Custom Event를 정상적으로 전파하고 싶은 경우 해결방법은?

Custom Event 생성시 composed 옵션값을 true로 설정하여 전달

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

17 of 27

Part 4

ComposedPath

ⓒSaebyeol Yu. Saebyeol’s PowerPoint

18 of 27

Part 4

ComposedPath

ComposedPath 란??

이벤트가 전파된 요소들의 흐름을 최하위 노드부터 최상위 노드 까지

배열로 반환하는 속성

19 of 27

Part 4

ComposedPath

이미지

e.path, e.composedPath 결과값(동일)

QA. 둘 중 아무거나 사용해도

되는 건가?

e.Path는 IE, Edge에서 호환이 되지 않으므로,

e.composedPath 속성 사용 권장

20 of 27

Part 4

ComposedPath

이미지

☞ 주의사항

Shadow root 사용시, shadow root가 닫힌 상태라면, composedPath는 해당 shadow root 내부 요소를 제외한 나머지 전파 요소를 반환(Array)

내부까지 전달(p태그 포함 O)

내부까지 전달 안됨(p태그 포함 X)

21 of 27

Part 5

IsConnected

22 of 27

Part 5

IsConnected

IsConnected란??

노드가 객체에 직접 또는 간접적으로 연결되어져 있는지에 대한

여부를 나타내는 속성(Boolean)

23 of 27

Part 5

IsConnected

이미지

예시 사진들처럼, 해당 root 또는 요소 에게

특정 연결점(스타일, 자식요소 등)이 있는지를

명확하게 표기해준다(append 이후 시점)

24 of 27

Part 6

CustomElements

25 of 27

Part 6

CustomElements

CustomElements란??

HTML을 확장하여 새롭게 커스텀 엘리먼트를 만들 수 있도록 지원하는

JS Api(라이프 사이클도지원)

26 of 27

Life Cycle Methods	설명
constructor()	elements의 인스턴스가 생성되거나 업그레이드 될 때 호출
connectedCallback()	Elements가 DOM에 삽입될 때 마다 호출
disconnectedCallback()	DOM에서 elements가 삭제될 때 마다 호출
attributeChangeCallback (attributeName, old, value, newValue)	속성(attr)이 추가, 삭제, 업데이트, 대체될 때 마다 호출

Part 6

CustomElements

☞ 추가 참조 설명 링크 : https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#lifecycle_callbacks

☞ 추가 custom elements 실 적용 예제 파일 참조(components, page)

1 of 27

2 of 27

3 of 27

4 of 27

5 of 27

6 of 27

7 of 27

8 of 27

9 of 27

10 of 27

11 of 27

12 of 27

13 of 27

14 of 27

15 of 27

16 of 27

17 of 27

18 of 27

19 of 27

20 of 27

21 of 27

22 of 27

23 of 27

24 of 27

25 of 27

26 of 27

27 of 27