我注意到,如果tabindex
属性在带有delegatesFocus: true
的shadow DOM中的任何地方使用,双击文本选择对其他元素都不起作用。我可以在Chrome或Edge中重现这一点。
不工作-tabindex
和delegatesFocus: true
<div id="app-root"></div>
<script>
document.querySelector('#app-root').attachShadow({mode: "open", delegatesFocus: true}).innerHTML =
"<div>Unable to highlight by double clicking</div>\n" +
"<div tabindex=\"0\">Highlights on double click</div>\n"
</script>
字符串
工作-tabindex
和delegatesFocus: false
<div id="app-root"></div>
<script>
document.querySelector('#app-root').attachShadow({mode: "open"}).innerHTML =
"<div>Unable to highlight by double clicking</div>\n" +
"<div tabindex=\"0\">Highlights on double click</div>\n"
</script>
型
工作-无tabindex
和delegatesFocus: true
<div id="app-root"></div>
<script>
document.querySelector('#app-root').attachShadow({mode: "open", delegatesFocus: true}).innerHTML =
"<div>Unable to highlight by double clicking</div>\n" +
"<div>Highlights on double click</div>\n"
</script>
型
我对shadow DOM的使用是否不正确?
1条答案
按热度按时间u7up0aaq1#
重构为最小所需代码,双击即可
所以在你的代码中有一些东西阻止了它。
从失败的代码开始,一行一行地将其重构为这段代码,看看哪里出错了。
字符串