웹 컴포넌트
(Web Components)
알아보기
목차
0. What is WebComponent
1. Why? WebComponents
2. Web Components Spec
3. Example 살펴보기
What is WebComponents ?
"웹 컴포넌트는 웹 페이지와 웹 앱에 쓸 수 있는 새롭고 재사용 가능한데다, 캡슐화 할 수 있는 HTML 태그를 만들게 해주는 웹 플랫폼 API의 묶음입니다"
Why?
웹 컴포넌트 등장에 앞서
현재 프론트엔드 생태계 컴포넌트 중심 개발
FrameWork들?
이미 Components 중심 개발
WebComponents ???
56:~ 1:28
결국
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는 특별한 이름 규칙을 필요로 한다. 쉽게 설명하면 글자 가운데 -를 하나 이상 포함해야 한다는 것이다.
W3C Custom Elements: 올바른 이름 규칙
MDN_CustomEl_example
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.
Example
Example
CurrentTime 예제로LifeCycle 알아보기
LifeCycle Hooks
추가 정보 & 유의사항
- 네이티브 & 커스텀 엘리먼트 클래스를 상속하여 확장 가능
- <template> 태그로도 생성 가능
- `-` (Dash) 가 포함된 이름으로 지어야 하고
- 같은 이름의 엘리먼트를 한 번만 등록 가능하고
- self-closing 엘리먼트는 허용되지 않는다
Title Text
지원 현황
참고 자료
Copy of Web Component 알아보기
By chany
Copy of Web Component 알아보기
11월 원데이이모콘 발표
