根据我在
this question发现的
this demo,我有这样的答案:
只需将tabindex属性添加到您想要可聚焦的元素即可.
// Add this to createdCallback function:
if (!this.hasAttribute('tabindex')) {
// Choose one of the following lines (but not both):
this.setAttribute('tabindex', 0);
this.tabIndex = 0;
}
// The browser automatically syncs tabindex attribute with .tabIndex property.
单击该元素将使其成为焦点.按下选项卡将起作用.使用:CSS中的焦点也可以使用. keydown和keyup事件工作,虽然keypress没有(但it’s deprecated anyway).在Chrome 44和Firefox 40上测试过.
另请注意,即使缺少HTML属性,this.tabIndex也会返回-1,但这与设置tabindex =“1”的行为不同:
>< foo>< / foo>:没有tabindex属性,该元素不可聚焦.
>< foo tabindex =“ - 1”>< / foo>:该元素无法通过制表符导航访问,但仍可通过单击进行调整.
参考文献: