나만의 태그: Shadow DOM

핵심 개념

다른 곳의 스타일과 섞이지 않도록 꽁꽁 숨겨진 나만의 특별한 HTML 태그를 만드는 기술이에요.

코드 분석

HTML5📋 코드 (10줄)

<div id='host'>여기는 일반 영역입니다.</div>
<button onclick='makeShadow()'>Shadow 영역 추가</button>
<script>
  function makeShadow() {
    const host = document.getElementById('host');
    if (host.shadowRoot) return;
    const shadow = host.attachShadow({mode: 'open'});
    shadow.innerHTML = `<style>p { color: white; background: black; padding: 10px; }</style><p>저는 Shadow DOM 안의 비밀스러운 문단입니다.</p>`;
  }
</script>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Web Component (Shadow DOM) 코드에서
스타일 격리, slot 사용, 이벤트 버블링 문제를 찾아
프로덕션 수준으로 개선해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

Shadow DOM으로 재사용 가능한 토글 버튼, 모달, 탭 컴포넌트를
순수 JS만으로 만든 실전 코드 3개로 보여줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Web Components 구현을 분석해서
번들 크기, SSR 호환, 디자인 시스템 통합 한계를
종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년에 Shadow DOM·Web Components가
React, Vue 시대에도 여전히 살아남았는지,
Lit·Stencil 같은 라이브러리가 의미 있는지 솔직히 말해줘.

⭐ 이것만 기억하세요

나만의 태그: Shadow DOM는 이 3가지만 확실히 잡으세요

1.컴포넌트의 CSS가 외부 스타일과 충돌하면 디자인이 예측 불가하게 깨지는데, 격리 수단이 없으면 해결이 불가능합니다

2.Shadow DOM은 컴포넌트 내부에 독립된 DOM 트리를 만들어 스타일과 마크업을 완전히 캡슐화합니다

3.HTML5 트랙을 마쳤습니다 — 다음은 CSS3 트랙에서 이 구조 위에 시각적 디자인을 입히는 법을 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.33 — 질문하거나 답변을 확인하세요

→

진행도 33 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)