Svelte：将焦点设置为自定义Web组件中的广告位元素

Question

我目前正在使用Svelte构建自定义Web组件库。

我已经完成了一个select-options下拉菜单组件，该组件可以接受嵌套的带槽内容组成下拉菜单选项。它对鼠标用户没有任何已知问题，可以像这样实现：

<custom-select label="My Custom Select Element">
        <custom-option value="1">Option 1</custom-option>
        <custom-option value="2">Option 2</custom-option>
        <custom-option value="3">Option 3</custom-option>
</custom-select>

我现在正在研究组件的可访问性，并且需要实现“陷阱焦点”。在不深入研究实现陷阱焦点的各种方式的情况下，我试图完成一个简单的测试，即将焦点分配给父组件中的一个插槽元素。所有插入的元素都具有tabindex =“ 0”，我可以通过它们进行切换，而不会出现问题。

我可以使用Svelte中的绑定成功“抓住”我要关注的元素。虽然您不能将绑定指令直接放置在slot元素上（您can将属性放置在slot上），但我能够像这样绑定到父span标签：

<span bind:this={slotObj}>
        <slot />
</span>

然后，我可以使用一些JavaScript深入绑定父对象，并将开槽的元素分配到名为'options'的对象中：

let slot = slotObj.children[0];
options = slot.assignedElements();

如果我要控制台记录选项对象中的第一个元素，我会看到预期的结果：

console.log(options[0]); // <custom-option value="1">Option 1</custom-option>

我还可以成功地修改options对象中元素的属性，并查看DOM中的更改。因此，当涉及到“抓取”带槽元素并更改其属性时，没有任何问题。但是，以下操作将not从父组件内部进行工作，以集中放置有槽的元素：

options[0].focus();

这不会引发任何错误，它只是无能为力。如前所述，我能够在选项卡之间进行制表，因此它们可以在常规制表符的情况下获得焦点。我似乎只能通过JavaScript来分配焦点。在处理自定义Web元素和广告位内容时，任何Svelte的特定建议和/或一般建议将不胜感激。非常感谢。

我目前正在使用Svelte构建自定义Web组件库。我已经完成了一个select-options下拉菜单组件，该组件可以接受嵌套的带槽内容组成下拉菜单选项。它...

Answer 1

过去我做过的一件事是我隐藏了父标签，然后我抓住了所有选项的值，然后使用#each将它们放在新标签中。我将相关的事件侦听器放在#each块的父对象上。

Answer 2

[我认为Benny Hinrichs提供了一种优雅的解决方案（加上有效的REPL！），所涉及的解决方法比我发现也可以使用的以下方法少。