Web Components 탭 컴포넌트

문제 설명

Web Components API를 사용하여 재사용 가능한 탭 컴포넌트를 구현하세요.

사용 예시

<custom-tabs>
  <custom-tab label="탭 1">첫 번째 내용</custom-tab>
  <custom-tab label="탭 2">두 번째 내용</custom-tab>
  <custom-tab label="탭 3" disabled>비활성</custom-tab>
</custom-tabs>

요구사항

• Custom Elements API 사용
• Shadow DOM으로 스타일 캡슐화
• 슬롯(slot)으로 콘텐츠 삽입
• 키보드 접근성 (화살표 키 탐색)
• 커스텀 이벤트 발생 (tab-change)
• 속성 변경 감지 (observed attributes)

평가 기준

• Web Components 표준 준수
• 접근성 (ARIA)
• 재사용성