Svelte 5 Web Component

A Svelte 5 web component with props and slots.

Features

• ✅ Props support (title and color)
• ✅ Named slots (header, footer) and default slot
• ✅ Built with Svelte 5
• ✅ Compiled as a custom web component

Getting Started

1. Install dependencies:

   npm install
   

2. Run development server:

   npm run dev
   

3. Build for production:

   npm run build
   

Usage

After building, include the component in your HTML:

<script type="module" src="/dist/my-web-component.js"></script>

<my-component title="Hello!" color="blue">
  <div slot="header">Custom Header</div>
  <p>Main content goes here</p>
  <div slot="footer">Custom Footer</div>
</my-component>

Props

• title (string): The title text (default: "Default Title")
• color (string): The border and title color (default: "blue")

Slots

• header: Content for the header section
• default: Main content area
• footer: Content for the footer section