如何手动设置 Shadow DOM（Lit Web Component）中元素的焦点

Question

我正在构建一个选择/下拉组件作为 Lit Web 组件。为了具有一致的样式，这不使用本机选择。我正在使用 div 并添加逻辑，让它们在适当的时间和地点出现。我还希望该组件完全可访问，包括支持键盘控制。

我现在处于单击 div（或在键盘上使用空格/回车）后，出现下拉 div 的部分。现在我需要将焦点从单击的 div（触发下拉列表）更改为下拉列表中的第一项。

但是，我不知道如何手动关注该元素。我知道文档无法检测到 Shadow DOM 中的元素，并且我假设我需要使用 renderRoot (https://lit.dev/docs/components/shadow-dom/)，但我可以'寻找使元素获得焦点的函数或方法。 我可以使用

this.renderRoot.querySelector('#first-dropdown-item')

来获取所需的元素，但随后我不知道如何关注它。

我在文档中也找不到。

我还需要将焦点捕获在这个 div 中，直到下拉菜单关闭。我也不知道该怎么做。

Answer 1

这里有一个很好的例子来关注文档这里

您可以使用

connectedCallback

或

firstUpdated

钩子通过

focus()

调用元素上的

ref

方法。