Web Component A to C
목차
1. Why? WebComponents
2. Web Components Spec 살펴보기
3. 참고 및 정리
What is WebComponents ?
"웹 컴포넌트는 웹 페이지와 웹 앱에 쓸 수 있는
새롭고 재사용 가능한데다, 캡슐화 할 수 있는HTML 태그를 만들게 해주는
웹 플랫폼 API의 묶음입니다"
Why? Components
웹 컴포넌트 등장에 앞서
현재 프론트엔드 생태계 컴포넌트 중심 개발
FrameWork들?
이미 Components 중심 개발
결론
date-picker/react , date-picker/vue 등
framework 별로 찾지 말고
date-picker로 만들어진 애 쓰면 안되나?
framework 종속 적인 기능 없애고 -> 표준 코드로 만들어보자
어디서나 동작 가능하게 웹 표준인 웹 컴포넌트로 만듬으로써
상호운영성 을 높일 수 있다
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.
1. Custom Elements
등록
1. Custom Elements
class HelloElement extends HTMLElement {
// 'name' 이라는 속성의 변화를 감시한다.
static get observedAttributes() {
return ["name"];
}
// 속성의 변화에 반응한다.
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == "name") {
this.textContent = `Hello, ${newValue}`;
}
}
}
// 새로운 엘리멘트들 정의한다.
customElements.define("hello-element", HelloElement);1. class 이름-> html element 확장하는 구조로 작성
2. 등록 customElements.define(name, consturctor, option)
1. Custom Elements
class FancyDrawer extends AppDrawer {
constructor() {
super(); // always call super() first in the constructor. This also calls the extended class' constructor.
...
}
toggleDrawer() {
// Possibly different toggle implementation?
// Use ES2015 if you need to call the parent method.
// super.toggleDrawer()
}
anotherMethod() {
...
}
}
customElements.define('fancy-app-drawer', FancyDrawer);2. 기존에 만들어논 custom-el 확장 가능
LifeCycle 알아보기
React & Vue Life Cycle
LifeCycle Hooks
class Square extends HTMLElement {
// Specify observed attributes so that
// attributeChangedCallback will work
static get observedAttributes() {
return ['c', 'l'];
}
constructor() {
// Always call super first in constructor
super();
}
connectedCallback() {
console.log('Custom square element added to page.');
updateStyle(this);
}
disconnectedCallback() {
console.log('Custom square element removed from page.');
}
adoptedCallback() {
console.log('Custom square element moved to new page.');
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('Custom square element attributes changed.');
updateStyle(this);
}
}Example 살펴보기
2. shadow Dom
개발자들이 겪는 웹 어플리케이션 문제점 HTML, CSS의 Global
-
id / class 충돌
-
id가 있는 DOM은 window 객체에 할당된다
-
!important
document.body.appendChild(document.createElement('span')).innerHTML =
"<style>div {background-color: green}</style>"
document.body.appendChild(document.createElement('span'))
.attachShadow({mode: 'open'})
.innerHTML = '<style>div { background-color: #82b74b; }</style><div>야호!</div>';
기존의 iframe으로 비슷하게 가능은 했지만 문제가 많았다.
http 요청 더 일어나고 별도의 페이지로 소비되는 리소스 , 같은 domain이 아닌 경우 접근 불가능한 이슈
Shadow DOM
Shdow Dom , Scope를 격리할 수 있다
Slot 끼워넣기
Example :D
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
3.정리 및 참고
개인적으로 느낀 부분은 WebComponent가
가상 Dom을 흡수하는 방향?
혹은 프레임워크들이 또 웹 컴포넌트의 좋은점들을 차용 (shadow-dom같은)
하지 않을까 싶습니다.
이제 v1인데 -> v3쯤 되면
표준인 웹 컴포넌트가 또 프레임워크들과 경쟁을 하지 않을까도 싶습니다.
FrameWork +WebCOmponents
가상DOM + ShadowDom+ CustomEl 범용성
