开发自定义Bootstrap主题Svelte库：Floating-UI上下文合理性探讨

背景 #

我正在开发一款适配自定义Bootstrap主题的Svelte库，仅使用其CSS部分，舍弃所有JavaScript。当前正处理菜单、提示框（Tooltip）等浮动组件的开发，在Tooltip设计上遇到瓶颈。

Floating-UI核心需求 #

Floating-UI库需要参考元素和目标元素的HTML元素来执行位置计算。使用bind:this本身没问题，但如果有数十个可能显示浮动UI的组件，父组件会被大量存储引用的变量或数组填满，且数组难以区分对应关系。同时，每个浮动UI还需要单独的show布尔变量来控制显隐。

已尝试的插槽方案 #

实现代码 #

<Button fuiTriggerOpts={{ hideTriggers: Triggers.Focus, showTriggers: Triggers.Focus }}>
    <svelte:fragment slot="content">
        Focus me!
    </svelte:fragment>
    <Tooltip shadow={true} slot="floatUi" placement="top-start" let:reference referenceEl={reference}>
        <div class="fancy-tooltip">
            <div class="big">
                <Icon name="keyboard" />
            </div>
            <p>I only appear or disappear on <strong>keyboard focus</strong> events.</p>
        </div>
    </Tooltip>
</Button>

优势 #

• 不会污染父组件脚本标签的引用变量，通过插槽变量获取父组件引用并传递给Tooltip
• 按钮自行声明show变量，用于控制浮动UI的显示隐藏
• 实现逻辑相对简洁（暂忽略fuiTrigger相关内容）

劣势 #

• 一个元素（如按钮）最多只能绑定一个浮动UI，无法同时绑定Tooltip和菜单
• 需为所有可能关联浮动UI的组件重复实现此类插槽结构，涉及图标、按钮、分割器等众多组件

待评估的上下文方案 #

我想到另一种方案：让控件通过setContext()将其根元素引用发布为上下文，这样Tooltip等浮动UI组件可通过getContext()获取引用，无需传递或存储变量。但这意味着库中几乎所有控件都要执行setContext()操作。

核心疑问 #

• 这种做法是否属于滥用Svelte的上下文系统？
• 100个左右的上下文是否过多，会引发性能问题吗？
• 有没有更简便的替代解决方案？

内容的提问来源于stack exchange，提问作者José Ramírez