웹 컴포넌트
Web Component
목차
0. What is WebComponent
1. Why? WebComponents
2. Web Components Spec
3. Example 살펴보기
What is WebComponents ?
"웹 컴포넌트는 웹 페이지와 웹 앱에 쓸 수 있는 새롭고 재사용 가능한데다, 캡슐화 할 수 있는 HTML 태그를 만들게 해주는 웹 플랫폼 API의 묶음입니다"
Why? Components
웹 컴포넌트 등장에 앞서
현재 프론트엔드 생태계 컴포넌트 중심 개발
FrameWork들?
이미 Components 중심 개발
WebComponents ???
결국
date-picker/react , date-picker/vue 등
framework 별로 찾지 말고
date-picker로 만들어진 애 쓰면 안되나?
어디서나 동작 가능하게 웹 표준인 웹 컴포넌트로 만듬으로써
상호운영성 을 높일 수 있다
Web Components Spec
1. Custom Elements
2. Shadow Dom
3. ES Modules
4. HTML Template
1. Custom Elements
The Custom Elements specification lays the foundation for designing and using new types of DOM elements.
주의할 점은 태그의 이름인데, Custom Elements는 특별한 이름 규칙을 필요로 한다. 쉽게 설명하면 글자 가운데 -를 하나 이상 포함해야 한다는 것이다.
2. shadow Dom
개발자들이 겪는 웹 어플리케이션 문제점 HTML, CSS의 Global
-
id / class 충돌
-
id가 있는 DOM은 window 객체에 할당된다
-
!important
Shdow Dom , Scope를 격리할 수 있다
3. ES Modules
The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way.
ES6 이전까지는, 브라우저 환경에서 사용 가능한
표준 모듈 시스템은 없었습니다
ES6부터 import, export 형태로 ESModule를 지원합니다
4. HTML Template
The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.
Shdow Dom , Scope를 격리할 수 있다
Example
LifeCycle 알아보기
React & Vue Life Cycle
LifeCycle Hooks
FrameWork +WebCOmponents
가상DOM + ShadowDom+ CustomEl 범용성
추가 정보 & 유의사항
- 네이티브 & 커스텀 엘리먼트 클래스를 상속하여 확장 가능
- <template> 태그로도 생성 가능
- `-` (Dash) 가 포함된 이름으로 지어야 하고
- 같은 이름의 엘리먼트를 한 번만 등록 가능하고
- self-closing 엘리먼트는 허용되지 않는다
Title Text
지원 현황
참고 자료
웹 컴포넌트 Web Component
webComponents
By chany
webComponents
- 476
