关于Svelte组件内使用对应文件名蛇形标签初始化自身的疑问

这种用法的核心作用 #

• 跨生态复用核心逻辑：该项目的核心功能全部封装在原生Web Component（自定义元素）中，仅需维护一套核心代码，即可同时支持原生JS、React、Vue等所有支持自定义元素的技术栈使用；外层的Svelte组件仅作为适配层，给Svelte生态用户提供符合Svelte开发习惯的调用方式，不需要用户手动处理自定义元素的属性、事件兼容问题。
• 逻辑解耦降低维护成本：核心的滚动、渲染等高频逻辑全部沉淀在底层自定义元素中，和上层框架适配层完全分离，后续核心逻辑迭代、bug修复不需要修改各框架的适配层代码，维护效率更高。
• 性能优化：底层自定义元素是纯原生JS实现，没有框架运行时的额外开销，表格滚动、大量数据渲染这类高频场景的性能表现更好，上层Svelte层只负责响应式状态和底层元素的同步即可。

实现原理解析 #

你看到的组件内的蛇形（短横线）命名标签并不是当前Svelte组件本身，不存在「自己初始化自己」的递归逻辑，二者是完全独立的两层实现：

1. 项目核心层会提前注册全局自定义元素：核心代码中会通过customElements.define('revogr-viewport-scroll', 原生实现类)的方式完成自定义标签的全局注册，符合W3C规范的自定义元素浏览器本身就可以直接识别渲染，不需要Svelte做额外处理。
2. 当前的Svelte组件是纯适配层包装：它的作用就是接收Svelte调用方传入的props、事件监听，全部透传给底层的原生自定义元素，同时把原生元素的slot透传给上层，让Svelte用户调用这个组件的时候和调用普通Svelte组件的语法完全一致，不用感知底层自定义元素的存在。你贴的代码里的属性绑定、事件监听、bind:this={__ref}都是标准的透传逻辑，调用方拿到的组件实例其实就是底层原生自定义元素的实例。
3. 短横线命名是自定义元素的强制规范：W3C要求自定义元素标签名必须包含短横线，避免和原生HTML标签冲突，因此大驼峰命名的Svelte组件文件名会对应转换为短横线命名的自定义元素标签，比如RevogrViewportScroll.svelte对应标签就是revogr-viewport-scroll。

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