Web Component Init

Creator

Creator

Seonglae Cho

Created

Created

2022 Apr 11 14:28

Editor

Editor

Seonglae Cho

Edited

Edited

2022 Apr 11 14:30

Refs

Refs

커스텀 HTML 요소를 생성하려면 먼저 요소를 정의하는 클래스(Class)를 선언


class WebComponent extends HTMLElement {
  constructor() {
    super()
    this.addEventListener('click', e => this.toggleCard())
  }
  toggleCard() { console.log('카드 토글(Toggle)') }
}
window.customElements.define('web-component', WebComponent)

yamoo9/WebComponent

HTML Web Component 웹 컴포넌트에 대한 필요성과 기술 표준에 대한 이야기는 몇 년에 걸쳐 거론되어 왔지만 Chrome, Opera를 제외한 주요 브라우저에서는 아직까지 일부만 지원하고 있는 실정입니다. 하지만 웹 컴포넌트 폴리필 을 사용하면 바로 적용해 사용할 수 있습니다. 웹 컴포넌트는 웹 애플리케이션 제작 시에 사용 가능한 부품(Component)을 말하며, 재사용을 목적으로 캡슐화 된 커스텀 HTML 요소를 만들 수 있는 웹 플랫폼 API 세트입니다.

https://github.com/yamoo9/WebComponent#%EB%AA%A9%EC%B0%A8

yamoo9/WebComponent

Recommendations

/////////