我該如何設計HTML元素的樣式并在一個苗條的組件中重新展示它們的所有事件呢？(本質上，我在尋找制作風格化組件的最簡單的方法)

例如，我正在嘗試設計一個常規(guī)的HTML按鈕，并將其公開為一個可重用的組件:

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

  const dispatch = createEventDispatcher();
</script>

<button
  on:click={() => dispatch("click")}
  on:mouseover={() => dispatch("mouseover")}
  {/* ...and so on for every other event */}
>
  <slot />
</button>

<style>
  button {
    /* ... */
  }
</style>

有什么方法可以避免將按鈕HTML元素上的每個事件都調用調度來通過父元素傳播事件？有更簡單的方法嗎？

我嘗試過搜索，大多數(shù)地方都讓我使用CSS-in-JS，但是我不想放棄所有的優(yōu)化，讓我的風格完全用苗條的方式寫給我(更小的包大小，更好的性能，等等。)

您可以通過列出事件來轉發(fā)事件，而無需事件處理程序:

<button {...$$restProps} on:click on:focus on:hover ...>

不需要調度，但是您當前不能自動轉發(fā)所有事件，它們仍然需要被列出。(關于那個的問題)

屬性通過$$restProps傳遞，其中包括所有未顯式定義的屬性(非事件)。(文檔)

您可以使用$$restProps對象來傳遞的所有事件和屬性 組件的按鈕:

腳本

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

  const dispatch = createEventDispatcher();

  export let $$restProps;
</script>

<button on:click={() => dispatch("click")} {...$$restProps}>
<slot />

式樣

<style>
  button {
    /* ... */
  }
</style>

然后像這樣使用這個組件:

<StyledButton class="my-button" on:click={() => console.log("clicked!")}>
  Click me!
</StyledButton>