2021.08.14 - [Web] - Web component (Custom Elements, Shadow DOM, Template) 2021.08.14 - [Web] - Web Components Callback Methods & lifecycle 앞서서 Web Component를 만드는 방법에 대해서 알아 보았다. 간단한 Web Component를 만들고 공개하는 방법에 대해서 알아보자. Profile information Component Design Component 명은 profile-info이고 이름, 소속, 사번, 이미지, 그리고 고용형태를 표현한다. 고용형태는 ft = fulltime, pt = parttime, ct ? 로 나누어서 색을 바꿈으로써 표현을 달리한다. web componen..

web component에 대해서는 아래 내용을 먼저 읽고 오자. 2021.08.14 - [Web] - Web component (Custom Elements, Shadow DOM, Template) connectedCallback() component가 DOM에 추가 되면 가장먼저 불리워지는 method이다. 해당 Component에 event가 bind 되어야 한다면 가급적 여기에서 모든 event를 bind 해줘야 한다. 앞서 만들어 놓은 helloworld 컴포넌트에 아래와 같이 callback method를 override 해보자. class HelloWorld extends HTMLElement { constructor(){ super(); const $template = document.qu..