Special Elements — svelte:로 시작하는 특수 요소들

<script>
  import Home from './Home.svelte';
  import About from './About.svelte';
  import Contact from './Contact.svelte';

  const routes = { home: Home, about: About, contact: Contact };
  let currentRoute = $state('home');
</script>

<nav>
  <button onclick={() => currentRoute = 'home'}>홈</button>
  <button onclick={() => currentRoute = 'about'}>소개</button>
  <button onclick={() => currentRoute = 'contact'}>연락</button>
</nav>

<!-- this에 컴포넌트를 동적으로 전달 -->
<svelte:component this={routes[currentRoute]} />

<script>
  let { level = 1, children } = $props();

  // h1~h6 중 동적으로 선택
  let tag = $derived(`h${Math.min(Math.max(level, 1), 6)}`);
</script>

<!-- 태그명을 동적으로 결정 -->
<svelte:element this={tag}>
  {@render children()}
</svelte:element>

<!-- 사용 예시 -->
<Heading level={1}>제목 1</Heading>
<Heading level={2}>제목 2</Heading>
<Heading level={3}>제목 3</Heading>

<script>
  let innerWidth = $state(0);
  let innerHeight = $state(0);
  let scrollY = $state(0);
  let online = $state(true);

  function handleKeydown(e) {
    if (e.key === 'Escape') {
      console.log('ESC 키 눌림');
    }
  }
</script>

<!-- 윈도우 이벤트 리스너 (자동 정리됨) -->
<svelte:window
  onkeydown={handleKeydown}
  onscroll={() => {}}
  bind:innerWidth
  bind:innerHeight
  bind:scrollY
  bind:online
/>

<p>화면 크기: {innerWidth} x {innerHeight}</p>
<p>스크롤: {scrollY}px</p>
<p>네트워크: {online ? '온라인' : '오프라인'}</p>

<!-- 스크롤에 따른 헤더 숨기기 -->
<header class:hidden={scrollY > 100}>
  네비게이션 바
</header>

<style>
  header { position: fixed; top: 0; width: 100%; transition: transform 0.3s; }
  .hidden { transform: translateY(-100%); }
</style>

<script>
  function handleVisibilityChange() {
    if (document.hidden) {
      console.log('탭 비활성화');
    } else {
      console.log('탭 활성화');
    }
  }

  function handleSelectionChange() {
    const selection = document.getSelection()?.toString();
    if (selection) {
      console.log('선택된 텍스트:', selection);
    }
  }
</script>

<svelte:document
  onvisibilitychange={handleVisibilityChange}
  onselectionchange={handleSelectionChange}
/>

<script>
  let isDragging = $state(false);
</script>

<svelte:body
  ondragenter={() => isDragging = true}
  ondragleave={() => isDragging = false}
  ondrop={(e) => {
    e.preventDefault();
    isDragging = false;
    console.log('파일 드롭됨');
  }}
  ondragover={(e) => e.preventDefault()}
/>

<div class:drag-active={isDragging}>
  {isDragging ? '여기에 놓으세요!' : '파일을 드래그하세요'}
</div>

<style>
  .drag-active { border: 2px dashed #ff3e00; background: #fff5f5; }
</style>

<script>
  let { title, description } = $props();
</script>

<svelte:head>
  <title>{title} | 내 블로그</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <link rel="canonical" href="https://example.com" />
</svelte:head>

<h1>{title}</h1>

<!-- 이 컴포넌트를 immutable로 처리 (최적화) -->
<svelte:options immutable />

<!-- 커스텀 엘리먼트로 컴파일 -->
<svelte:options customElement="my-component" />

<script>
  import RiskyComponent from './RiskyComponent.svelte';
</script>

<svelte:boundary>
  <RiskyComponent />

  {#snippet failed(error, reset)}
    <div class="error">
      <p>오류 발생: {error.message}</p>
      <button onclick={reset}>다시 시도</button>
    </div>
  {/snippet}
</svelte:boundary>

<style>
  .error { background: #fee; padding: 1rem; border-radius: 4px; border: 1px solid #fcc; }
</style>

<script>
  let innerWidth = $state(0);

  let breakpoint = $derived(
    innerWidth >= 1200 ? 'xl' :
    innerWidth >= 992 ? 'lg' :
    innerWidth >= 768 ? 'md' :
    innerWidth >= 576 ? 'sm' : 'xs'
  );

  let isMobile = $derived(innerWidth < 768);
</script>

<svelte:window bind:innerWidth />

<div class="container breakpoint-{breakpoint}">
  {#if isMobile}
    <MobileNav />
  {:else}
    <DesktopNav />
  {/if}

  <main>
    <p>현재 브레이크포인트: {breakpoint} ({innerWidth}px)</p>
  </main>
</div>