🧩 Web Components와 Shadow DOM 완벽 가이드

class UserCard extends HTMLElement {
  constructor() {
    super();
    // 캡슐화를 위해 Open 모드로 Shadow DOM 부착
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          max-width: 320px;
          border: 1px solid #E2E8F0;
          border-radius: 12px;
          padding: 20px;
          background: #FFFFFF;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        p {
          color: #1E3A5F;
          font-weight: 600;
          font-size: 1.1rem;
          margin: 0 0 12px 0;
        }
        .badge {
          display: inline-block;
          background: #EBF8FF;
          color: #3182CE;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 0.85rem;
        }
      </style>
      <p>사용자 카드 컴포넌트</p>
      <span class="badge">Active Member</span>
    `;
  }
}

// 브라우저 레지스트리에 컴포넌트 등록
customElements.define('user-card', UserCard);

<user-card></user-card>

class StyledBox extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        div {
          /* 외부에서 전달된 CSS 변수가 없으면 기본값 #D6E8FB 사용 */
          background: var(--box-bg, #D6E8FB);
          border: 1px solid var(--box-border, #5B8FD4);
          color: var(--box-color, #1A365D);
          padding: 16px;
          border-radius: 8px;
          font-family: inherit;
        }
      </style>
      <div>격리된 스타일 영역입니다. (외부 CSS 변수 연동 가능)</div>
    `;
  }
}

customElements.define('styled-box', StyledBox);

<style>
  styled-box {
    --box-bg: #FEFCBF;
    --box-border: #D69E2E;
    --box-color: #744210;
  }
</style>
<styled-box></styled-box>

<template id="app-modal-template">
  <style>
    .modal-backdrop {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    .modal-container {
      background: white;
      padding: 24px;
      border-radius: 12px;
      width: 400px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
    .modal-header { font-size: 1.25rem; font-weight: bold; margin-bottom: 12px; }
    .modal-footer { margin-top: 20px; display: flex; justify-content: flex-end; gap: 8px; }
  </style>
  <div class="modal-backdrop">
    <div class="modal-container">
      <div class="modal-header">
        <slot name="header">기본 제목</slot>
      </div>
      <div class="modal-body">
        <slot name="body">기본 본문 내용</slot>
      </div>
      <div class="modal-footer">
        <slot name="footer">
          <button id="close-btn">닫기</button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
  class AppModal extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('app-modal-template');
      this.attachShadow({ mode: 'open' }).appendChild(template.content.cloneNode(true));
    }
  }
  customElements.define('app-modal', AppModal);
</script>

<app-modal>
  <span slot="header">시스템 경고</span>
  <p slot="body">작업을 계속 진행하시겠습니까? 데이터가 유실될 수 있습니다.</p>
  <div slot="footer">
    <button onclick="alert('취소됨')">취소</button>
    <button style="background: red; color: white;" onclick="alert('확인됨')">확인</button>
  </div>
</app-modal>

class LifeCycleElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    console.log('[1] constructor 호출됨');
  }

  // 감시할 어트리뷰트 지정
  static get observedAttributes() {
    return ['status', 'theme'];
  }

  connectedCallback() {
    console.log('[2] connectedCallback 호출됨: DOM 마운트 완료');
    this.render();
  }

  disconnectedCallback() {
    console.log('[3] disconnectedCallback 호출됨: DOM 언마운트 완료');
    // 메모리 누수 방지를 위한 이벤트 리스너 제거 등 정리 작업 수행
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      console.log(`[4] attributeChangedCallback: ${name} 속성이 [${oldValue}] -> [${newValue}]로 변경됨`);
      this.render();
    }
  }

  render() {
    const status = this.getAttribute('status') || 'idle';
    const theme = this.getAttribute('theme') || 'light';
    this.shadowRoot.innerHTML = `
      <style>
        div { padding: 12px; border-radius: 6px; }
        .light { background: #F7FAFC; color: #2D3748; }
        .dark { background: #1A202C; color: #EDF2F7; }
      </style>
      <div class="${theme}">
        현재 컴포넌트 상태: <strong>${status}</strong> (테마: ${theme})
      </div>
    `;
  }
}

customElements.define('lifecycle-element', LifeCycleElement);

class CounterComponent extends HTMLElement {
  // Form 연동을 위한 설정
  static formAssociated = true;

  constructor() {
    super();
    this._count = 0;
    this.attachShadow({ mode: 'open' });
    this.internals = this.attachInternals();
    this.render();
  }

  get count() {
    return this._count;
  }

  set count(val) {
    this._count = val;
    this.render();
    // 폼 내부에서 값으로 인식되도록 내부 상태 설정
    this.internals.setFormValue(String(this._count));
  }

  increment() {
    this.count++;
    // 외부로 커스텀 이벤트 디스패치 (bubbles와 composed를 true로 설정해야 Shadow DOM을 뚫고 올라감)
    this.dispatchEvent(new CustomEvent('count-changed', {
      detail: { count: this.count },
      bubbles: true,
      composed: true
    }));
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        button {
          background-color: #3182CE;
          color: white;
          padding: 8px 16px;
          border: none;
          border-radius: 6px;
          font-weight: 600;
          cursor: pointer;
        }
        button:hover { background-color: #2B6CB0; }
      </style>
      <button id="btn">카운트: ${this._count}</button>
    `;
    this.shadowRoot.getElementById('btn').addEventListener('click', () => this.increment());
  }
}

customElements.define('counter-component', CounterComponent);

// 전역 템플릿 캐싱 활용
const cachedTemplate = document.createElement('template');
cachedTemplate.innerHTML = `
  <style>
    .item { padding: 8px; border-bottom: 1px solid #EDF2F7; }
  </style>
  <div class="item"><slot>아이템</slot></div>
`;

class OptimizedItem extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    // 이미 파싱된 템플릿 노드를 클론하여 DOM 삽입 속도 극대화
    shadow.appendChild(cachedTemplate.content.cloneNode(true));
  }
}

customElements.define('optimized-item', OptimizedItem);