如何在Svelte中获取当前组件标签名并自动设置到Base组件？

我正在使用Svelte开发自定义UI组件库，所有组件都基于Base组件开发，每个组件需要有一个与组件标签名同名的CSS类。目前需要手动给Base组件设置componentName属性，修改组件文件名时还得同步更新该属性，想知道有没有办法自动获取当前组件名称并设置到Base组件中？或者是否存在类似import { current_component } from 'svelte/internal';的可返回组件名称的方法？

简化代码示例 #

Base.svelte #

<script>
    export let componentName
    export let tag = 'div'
</script>
<svelte:element this={tag} class={componentName}>
    <slot />
</svelte:element>  

Foo.svelte #

<script>
    import Base from './Base.svelte'
</script>
<Base tag="b" componentName="Foo">
    <slot />
</Base>

Bar.svelte #

<script>
    import Base from './Base.svelte'
</script>
<Base tag="h3" componentName="Bar">
    <slot />
</Base>

App.svelte #

<script>
    import Foo from './Foo.svelte'
    import Bar from './Bar.svelte'
</script>

<Foo>
    <Bar>This is Bar 1</Bar>
    <Bar>This is Bar 2</Bar>
</Foo>
<Foo>
    Foo
</Foo>

解决方案 #

可以利用ES模块的import.meta.url特性，自动从组件文件名中提取名称，无需手动维护componentName属性：

修改子组件（如Foo.svelte、Bar.svelte） #

<script>
    import Base from './Base.svelte';
    // 从当前文件URL中提取文件名，去除.svelte后缀
    const componentName = new URL(import.meta.url).pathname.split('/').pop().replace('.svelte', '');
</script>
<Base tag="b" {componentName}>
    <slot />
</Base>

说明 #

• 该方法依赖标准ES模块特性，Svelte及主流构建工具（Vite、Rollup等）均支持。
• 修改组件文件名时，componentName会自动同步更新，无需手动修改属性值。
• 避免了依赖svelte/internal这类内部API（内部API可能随版本变更，存在兼容性风险）。

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