웹 컴포넌트 생성기
Shadow DOM을 쓰는 커스텀 엘리먼트 클래스를 생성합니다
class MyCard extends HTMLElement {
static observedAttributes = ['title']
constructor() {
super()
this.attachShadow({ mode: 'open' })
}
connectedCallback() { this.render() }
attributeChangedCallback() { this.render() }
render() {
const label = this.getAttribute('title') ?? ''
this.shadowRoot.innerHTML = `<style>:host { display: block }</style><div></div>`
this.shadowRoot.querySelector('div').textContent = label // textContent로 XSS 방지
}
}
customElements.define('my-card', MyCard)
// 사용: <my-card title="안녕"></my-card>
웹 컴포넌트 생성기 소개
재사용 가능한 웹 컴포넌트를 생성합니다 별도 설치나 회원가입 없이 브라우저에서 바로 사용할 수 있습니다.
관련 키워드: 웹컴포넌트, 재사용, 컴포넌트, 생성