Web Components

1class MyButton extends HTMLElement {
2  constructor() {
3    super();
4    // Shadow DOM 생성 (mode: 'open' | 'closed')
5    this.attachShadow({ mode: 'open' });
6  }
7
8  // 관찰할 속성 목록 (이 속성 변경 시 attributeChangedCallback 호출)
9  static get observedAttributes() {
10    return ['label', 'disabled'];
11  }
12
13  // DOM에 추가됐을 때 (React의 componentDidMount)
14  connectedCallback() {
15    this.render();
16  }
17
18  // DOM에서 제거됐을 때 (React의 componentWillUnmount)
19  disconnectedCallback() {
20    this.cleanup();
21  }
22
23  // 속성 변경 시 (React의 componentDidUpdate)
24  attributeChangedCallback(name, oldVal, newVal) {
25    if (oldVal !== newVal) this.render();
26  }
27
28  render() {
29    const button = document.createElement('button');
30    button.textContent = this.getAttribute('label') || 'Click';
31    if (this.hasAttribute('disabled')) button.disabled = true;
32
33    const style = document.createElement('style');
34    style.textContent = 'button { padding: 8px 16px; border-radius: 4px; }';
35
36    this.shadowRoot.replaceChildren(style, button);
37  }
38}
39
40// 커스텀 태그 등록
41customElements.define('my-button', MyButton);
42
43// HTML에서 사용
44// <my-button label="저장" disabled></my-button>