网络组件的方案重点

Question

如何正确地处理web组件的编程焦点？

在web组件上调用focus()应该集中在影子DOM中的适当元素。这意味着覆盖焦点方法。不过，这还不够，因为web浏览器不知道组件是交互式的。其结果之一是，单击指向元素的锚点将不会聚焦它，就像单击本地交互式html元素(如<button> )一样。可能还有其他我不知道的暗示。

我所知道的使元素交互的唯一方法是给它一个表索引值。但是tabindex="0"将创建一个额外的制表符，而tabindex="-1"将删除组件中的所有制表符。所以这两样都不管用。下一步是设置tabindex="0"，然后在focus()和blur()上切换值。在我看来，为了满足这样一个基本需求(使web组件具有适当的交互性和可访问性)，我不得不做所有这些烦琐的工作，这让我觉得很疯狂。我是不是遗漏了什么？有没有更好的解决办法？

Answer 1

我确实错过了什么。Web有一个特定的API来实现这个目标：delegatesFocus。MDN文档。

设置为true时

• 在主机元素上调用focus()会使阴影DOM中的第一个可聚焦元素进入焦点。
• 单击组件内部的任何非焦点元素也是如此。
• 制表符序列不变。
• 应用主机上的:focus样式

它是web组件规范的一部分，所以不用担心支持。