[HTML] Slot 아주 유연해~

 

 

[HTML] Slot 아주 유연해~

이 태그 안 쓰고 웹 컴포넌트 만든다고요?
진심으로 묻습니다. 괜찮으신가요?

커스터마이징은 하고 싶고, 구조는 유지하고 싶고, 그런데 방법을 모른다면 오늘 이 글이 해답이 될지도 몰라요.

HTML에서 slot 태그는 웹 컴포넌트의 유연함을 완성하는 마지막 퍼즐입니다.

조용하지만, 강력한 존재. 그게 바로 <slot>.

 

오늘 배울 태그는
<slot>입니다.

 

// HTML 컴포넌트 정의 (예: my-card.html)
<template id="my-card">
  <style>
    .card {
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
    }
  </style>
  <div class="card">
    <slot>기본 텍스트</slot>
  </div>
</template>

 

<slot> 태그는 웹 컴포넌트 내부에서 외부 콘텐츠가 삽입될 위치를 정의합니다.

위 예시에서는 슬롯이 비어 있으면 "기본 텍스트"가 출력되고, 외부에서 삽입한 내용이 있으면 그것이 우선 적용됩니다.

이런 방식은 컴포넌트 재사용성과 유연성을 크게 높여줍니다.

 

// 스크립트에서 컴포넌트 등록
customElements.define('my-card', class extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById('my-card');
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.appendChild(template.content.cloneNode(true));
  }
});

 

위 코드는 커스텀 컴포넌트 <my-card>를 정의하고 Shadow DOM에 템플릿을 연결하는 전형적인 패턴입니다.

Shadow DOM 내에 정의된 <slot>은 외부로부터 콘텐츠를 받아들이는 창구가 되는 셈이죠.

디자인은 유지하고, 내용만 유동적으로 바꾸고 싶을 때 딱입니다.

 

728x90

 

// 실제 사용 예
<my-card>
  <p>사용자가 전달한 콘텐츠입니다.</p>
</my-card>

 

<my-card> 안에 <p> 태그를 넣으면 그 내용이 내부의 <slot> 자리에 들어갑니다.

이게 바로 슬롯의 기본 사용법입니다.
정해진 레이아웃은 유지하면서 콘텐츠는 외부에서 받아들이는 형태, 유연하면서 안정적이죠.

 

// named slot 사용 예시
<template id="named-card">
  <style>
    .card-title { font-weight: bold; }
  </style>
  <div>
    <div class="card-title"><slot name="title">제목 없음</slot></div>
    <div class="card-body"><slot name="body">내용 없음</slot></div>
  </div>
</template>

 

name 속성이 있는 <slot>은 지정된 위치에만 콘텐츠를 삽입합니다.

외부 콘텐츠에서 slot="title", slot="body"를 지정해줘야 정확히 들어가죠.
이 구조는 복잡한 컴포넌트를 만들 때 특정 콘텐츠 위치를 고정할 수 있어 유용합니다.

반응형

// 외부 콘텐츠 지정
<my-card>
  <span slot="title">공지사항</span>
  <p slot="body">서버 점검은 10시부터입니다.</p>
</my-card>

 

외부 콘텐츠에 slot 속성을 지정하면 내부에서 해당 name을 가진 <slot>에 삽입됩니다.

이 방식은 단순한 UI뿐 아니라 다국어 콘텐츠, 사용자 정의 내용, 구성 요소 주입 등 다양한 상황에서 쓰입니다.
결국 슬롯은 웹 컴포넌트의 진짜 실용성을 결정하는 요소예요.

 

 

💡 slot에서 fallback 콘텐츠는 필수가 아닙니다.

그러나 fallback을 넣어두면 디자인 상의 일관성과 기본 메시지를 전달할 수 있어 더 안정적인 구성으로 보입니다.
예외 처리를 CSS로 하는 것보다, HTML 구조 안에서 미리 정의해두는 게 더 견고하죠.

마무리하며 🌱

<slot>은 화려하지 않지만, 웹 컴포넌트 안에서 가장 유연한 부분입니다.

고정된 틀 안에서 사용자 정의 콘텐츠를 수용하는 방식— 그게 바로 현대 웹이 지향하는 구조죠.

이제 단순한 재사용을 넘어서, 디자인과 기능이 분리된 구조를 구현해보세요.

👉 더 많은 HTML 팁은 제 블로그에서 확인해보세요 https://jjaeho.tistory.com

배웠다 말았다 다시 시작했다😎