如何在Svelte组件中样式化HTML元素并重新暴露所有事件？

你想在Svelte中实现类似styled-components的功能，给原生HTML元素添加样式并封装成可复用组件，但不想手动为每个事件写dispatch逻辑。比如你当前的实现需要逐个转发click、mouseover等事件：

<script>
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();
</script>

<button
  on:click={() => dispatch("click")}
  on:mouseover={() => dispatch("mouseover")}
  {/* ... 要写遍所有事件 */}
>
  <slot />
</button>

<style>
  button {
    /* 自定义样式 */
  }
</style>

你希望找到更简便的方法，同时保留Svelte原生样式的体积和性能优势，不想用CSS-in-JS方案。

方法1：使用事件转发简写语法 #

Svelte支持on:*语法，可以一次性转发元素的所有事件到父组件，不需要逐个手动dispatch：

<script>
  // 无需引入createEventDispatcher
</script>

<button on:*>
  <slot />
</button>

<style>
  button {
    /* 自定义样式示例 */
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: #2196F3;
    color: white;
    cursor: pointer;
  }
</style>

所有原生button的事件（click、mouseover、keydown等）都会自动传递给父组件，父组件可以像使用原生button一样监听这些事件。

方法2：结合$$restProps传递所有属性和事件 #

如果除了事件，还需要传递原生HTML元素的其他属性（比如disabled、class、aria-*等），可以用$$restProps把所有未在组件中声明的props绑定到元素上，同时自动包含事件转发：

<script>
  // 可声明组件自定义props，比如尺寸
  export let size = "medium";
</script>

<button {...$$restProps} class="custom-button {size}">
  <slot />
</button>

<style>
  .custom-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .medium {
    font-size: 14px;
  }
  .large {
    font-size: 16px;
    padding: 12px 24px;
  }
</style>

父组件使用时，可直接传递原生属性和监听事件：

<CustomButton size="large" disabled on:click={() => console.log("clicked")}>
  点击我
</CustomButton>

方案优势 #

• 完全保留Svelte原生样式优势：样式编译为高效CSS，无CSS-in-JS额外运行时开销，包体积更小
• 代码简洁，无需手动维护事件列表，组件扩展性更强
• 贴合Svelte原生设计思想，学习成本低

内容的提问来源于stack exchange，提问作者iamkneel