shadow-root 元素中的访问键在 Firefox 中不起作用

Question

在shadow DOM中的元素中使用accesskey在Firefox中不会触发。

我在MacOS上测试了Chrome和Safari，在那里它可以正常工作。通过keydown或keyup事件侦听器手动映射密钥似乎很复杂，因为密钥映射因浏览器和操作系统而异。

有什么变通办法或其他解决方案吗？

我创造了一把简单的小提琴：https://jsfiddle.net/jk3mrx98/

class CustomElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
const customTextarea = document.createElement('textarea');
customTextarea.accessKey = 'F';
customTextarea.innerText = 'Accesskey F'
shadowRoot.appendChild(customTextarea);
}
}
window.customElements.define('custom-element', CustomElement);

<textarea accesskey="G">Accesskey G</textarea>
<custom-element></custom-element>

Answer 1

很可能是Firefox 88中的一个错误，该错误将在即将发布的89中修复。

影子根目录中的accesskey似乎从未在当前Firefox稳定版本(88(中正确注册，并且Alt+Shift+F触发器"；文件"；菜单。

但它似乎在即将到来的版本中得到了修复：在Windows上的Firefox Developer 89.b5(Aurora发布频道(中尝试了你的小提琴，两个访问键都如预期的那样工作：Alt+Shift+G focus"本地"；textarea，Alt+Shift+F在自定义元素中聚焦textarea。

Answer 2

没有答案。

只是展示了一种不同的编写构造函数的方法：

• 您可以在super()调用之前编写JS代码，但还没有"this">
• 您可以在super((上链接

constructor() {
const customTextarea = document.createElement('textarea');
customTextarea.accessKey = 'F';
customTextarea.innerText = 'Accesskey F';
super() // sets and returns this scope
.attachShadow({mode: 'open'}) // sets and returns this.shadowRoot
.append(customTextarea);
}