Web Components

// Custom Element 정의
class MyCounter extends HTMLElement {
  constructor() {
    super();
    // Shadow DOM 생성 (캡슐화)
    this.attachShadow({ mode: 'open' });
    this.count = 0;
  }

  connectedCallback() {
    // DOM에 추가될 때 호출
    this.render();
    this.shadowRoot.querySelector('button')
      .addEventListener('click', () => this.increment());
  }

  increment() {
    this.count++;
    this.render();
    // 커스텀 이벤트 발생
    this.dispatchEvent(new CustomEvent('count-changed', {
      detail: { count: this.count }
    }));
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        /* Shadow DOM 내부에만 적용 */
        button { padding: 8px 16px; cursor: pointer; }
        span { font-size: 1.5rem; margin: 0 10px; }
      </style>
      <button>+</button>
      <span>${this.count}</span>
    `;
  }
}

// 커스텀 요소 등록
customElements.define('my-counter', MyCounter);

// HTML에서 사용
// <my-counter></my-counter>

// React에서 사용
function App() {
  const handleCount = (e) => console.log(e.detail.count);
  return <my-counter onCount-changed={handleCount} />;
}