웹 컴포넌트
(Web Components)
알아보기

오늘의 발표자

• 안도형 (리내)
• Studio XID Korea
  프론트엔드 개발자
• 가끔 번역 함
• @adhrinae (Twitter)

왜 웹 컴포넌트를?

Omi는 시작에 불과했다

Squoosh App 등장

구글이 주도하는

다양한 오픈소스 웹 컴포넌트 프로젝트들이 있습니다

조금 뒤 같이 살펴보시죠

https://github.com/GoogleChromeLabs

다시 한번 묻는데,
왜 웹 컴포넌트죠?

프론트엔드 개발의

패러다임 전환

페이지 기반 개발

⬇

컴포넌트 기반 개발

캡슐화
(특히  CSS)

OOP for DOM?

웹 컴포넌트는 웹 페이지와 웹 앱에 쓸 수 있는 새롭고 재사용 가능한데다, 캡슐화 할 수 있는 HTML 태그를 만들게 해주는 웹 플랫폼 API의 묶음입니다.

 

웹 컴포넌트 API를 활용해서 만든 커스텀 컴포넌트와 위젯은 대부분의 모던 브라우저에서 동작하며 HTML과 함께 동작하는 모든 자바스크립트 라이브러리나 프레임워크와 사용할 수 있습니다.

webcomponents.org 에서 발췌 및 번역

전혀 새로운 것이 아니다

2011년에

처음 개념이 등장했고

(by Alex Russell)

2013년에

Polymer가 나왔다

하지만 브라우저

제조사들이 안따라왔음

스펙 재정의(v0 ➡ v1)

Web Components v0 deprecation

Custom Elements

- Reusable Web Components

재사용 가능한 새로운 HTML 태그를 만들고
다른 사람이 만든 태그
확장도 하고
이 모든 것이 웹 표준

Vanillja JS / HTML / CSS

무엇이 특별한가?

• LifeCycle Hooks
• 속성 변화 감지
• 등록 되기 전에 사전 선언 가능

Custom Element 만들어보기

LifeCycle Hooks

속성 변화 감지

엘리먼트가 정의되기 전/후 활용

추가 정보 & 유의사항

• 네이티브 & 커스텀 엘리먼트 클래스를 상속하여 확장 가능
• <template> 태그로도 생성 가능
• `-` (Dash) 가 포함된 이름으로 지어야 하고
• 같은 이름의 엘리먼트를 한 번만 등록 가능하고
• self-closing 엘리먼트는 허용되지 않는다

Custom Element Example

Shadow DOM

- Self-contained Web Components

우리가 생각하는

웹 애플리케이션의

자연스러운 문제점

Global

• id / class 충돌

• id가 있는 DOM은 window 객체에 할당된다

• !important

• 랜더링 최적화 문제 (contain 속성)

하지만 스코프를

격리할 수 있다면?

• 독립된 DOM: 컴포넌트의 DOM은 해당 컴포넌트에만 종속되어있다.(document.querySelector() 로 Shadow DOM 탐색 불가)
• 한정된 범위의 CSS: Shadow DOM 안에 선언된 스타일은 그 범위 안에서만 적용된다. 페이지 스타일이 영향을 미치지도 않고, 바깥 요소에 영향을 주지도 않는다.
• 조합 가능성: 선언적(Declarative), 마크업 기반의 컴포넌트 생성
• CSS 단순화: 범위가 한정된 DOM 덕분에 단순한 CSS 선택자를 사용할 수 있고, 네이밍 충돌을 걱정할 일이 줄어듦.
• 생산성: 애플리케이션을 하나의 거대한(글로벌) 페이지로 보지 않고, DOM 조각들의 모음으로 바라보게 된다.

Shadow DOM Example

Slots

무슨무슨 프레임워크와

다른 점은?

🙅

어떻게 같이 쓸 수 있을까?

https://custom-elements-everywhere.com

코드 직접 살펴보기

• Project VisBug

• Squoosh App

• file-drop custom element