如何在HTML页面中监听Svelte自定义元素的事件？

我编写了一个简单的Svelte按钮组件，代码如下：

<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import { idGenerator } from '../utils/helpers';
  export let id = idGenerator();
  export let label = 'Click';
  export let styleClass: string = '';
  const dispatch = createEventDispatcher();
  const calculatedClasses = '...'
  const buttonClicked = $event => {
    console.log('TARGET', $event);
    dispatch('message', {text: 'Hello'});
  }
</script>
<button on:click={buttonClicked} class={calculatedClasses()} id={id}>
  {label}
</button>
<svelte:options tag="aurora-button"></svelte:options>

main.ts内容如下：

export * from './lib/Button.svelte'

我希望在index.html文件中监听该按钮的点击事件，index.html代码如下：

<body>
   <script type="module" src="/src/main.ts"></script>
   <aurora-button size="large" type="success" on:message="clicked()"></aurora-button>
   <script>
      function clicked($ev) {
          console.log('EV', $ev);
     }
   </script>
</body>

但我无法在HTML文件中监听到Svelte组件发送的事件，浏览器提示“<aurora-button> was created with unknown prop 'on:message'”。网上的解决方案多为Svelte组件嵌套场景，请问我该如何正确实现？

核心原因 #

Svelte自定义元素的事件监听不能使用Svelte语法的on:message，这个写法会被Svelte识别为组件的props，因此触发未知属性的报错。原生HTML环境下需要用标准的事件绑定方式。

具体实现步骤 #

1. 修改index.html的事件绑定方式
   直接使用原生JS的事件绑定逻辑，有两种可选方案：

   • 方案一：通过addEventListener绑定

     <body>
        <script type="module" src="/src/main.ts"></script>
        <aurora-button id="myButton" size="large" type="success"></aurora-button>
        <script>
           function clicked($ev) {
               console.log('EV', $ev.detail); // Svelte派发的数据存放在event.detail中
           }
           // 等待DOM加载完成后绑定事件
           document.addEventListener('DOMContentLoaded', () => {
               const button = document.getElementById('myButton');
               button.addEventListener('message', clicked);
           });
        </script>
     </body>
     

   • 方案二：使用原生on[事件名]属性绑定

     <body>
        <script type="module" src="/src/main.ts"></script>
        <aurora-button size="large" type="success" onmessage="clicked(event)"></aurora-button>
        <script>
           function clicked($ev) {
               console.log('EV', $ev.detail);
           }
        </script>
     </body>
     

2. 注意事件数据的获取
   Svelte通过createEventDispatcher派发的事件，在原生环境中是CustomEvent类型，传递的参数会被放在事件对象的detail属性中，所以需要通过$ev.detail获取{text: 'Hello'}。

3. 可选：规范组件事件类型（TS环境）
   如果使用TypeScript，可以在组件中声明事件类型，获得更好的类型提示：

   <script lang="ts">
     import { createEventDispatcher } from 'svelte';
     import { idGenerator } from '../utils/helpers';
     export let id = idGenerator();
     export let label = 'Click';
     export let styleClass: string = '';
     
     // 声明事件类型
     type ButtonEvents = {
       message: { text: string };
     };
     const dispatch = createEventDispatcher<ButtonEvents>();
     
     const calculatedClasses = '...'
     const buttonClicked = $event => {
       console.log('TARGET', $event);
       dispatch('message', {text: 'Hello'});
     }
   </script>
   <button on:click={buttonClicked} class={calculatedClasses()} id={id}>
     {label}
   </button>
   <svelte:options tag="aurora-button"></svelte:options>
   

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