Safari 中的 ShadowRoot 处理
ShadowRoot handling in Safari
当我将可聚焦元素放在阴影中时 DOM，OSX Safari 不会将其包含在选项卡序列中（与所有其他浏览器不同）。该按钮可见、可单击但键盘用户无法访问。这是一个已知的错误？除了使组件可选项卡和转发焦点（这看起来有点恶心）之外，有没有办法处理它？
这是 Safari 控制台中的最小示例
<div class="host">
Shadow Content (Open)
<button>Click me</button>
</div>
我通过在 div.host 上调用 .attachShadow({"mode": "open"}) 然后将其 .shadowRoot.innerHTML 设置为 "<button>Click me</button>"
创建了这个示例
我在创建的组件中遇到了这个问题。我在 Chrome 中测试了上面的示例，按钮按预期包含在选项卡序列中。
Safari 默认不启用标签导航，必须通过首选项启用。
Tab highlights the next text field or pop-up menu. Tab also highlights
buttons and other controls if “All controls” is selected in the
Shortcuts pane of the Keyboard pane of System Preferences.
Option-Tab highlights the same items as Tab plus all other clickable
items.
To swap the behavior of Tab and Option-Tab, turn on “Press Tab to
highlight each item on a webpage” in the Advanced pane of Safari
preferences.
https://support.apple.com/guide/safari/keyboard-and-other-shortcuts-cpsh003/mac
当我将可聚焦元素放在阴影中时 DOM，OSX Safari 不会将其包含在选项卡序列中（与所有其他浏览器不同）。该按钮可见、可单击但键盘用户无法访问。这是一个已知的错误？除了使组件可选项卡和转发焦点（这看起来有点恶心）之外，有没有办法处理它？
这是 Safari 控制台中的最小示例
<div class="host">
Shadow Content (Open)
<button>Click me</button>
</div>
我通过在 div.host 上调用 .attachShadow({"mode": "open"}) 然后将其 .shadowRoot.innerHTML 设置为 "<button>Click me</button>"
我在创建的组件中遇到了这个问题。我在 Chrome 中测试了上面的示例，按钮按预期包含在选项卡序列中。
Safari 默认不启用标签导航，必须通过首选项启用。
Tab highlights the next text field or pop-up menu. Tab also highlights buttons and other controls if “All controls” is selected in the Shortcuts pane of the Keyboard pane of System Preferences.
Option-Tab highlights the same items as Tab plus all other clickable items.
To swap the behavior of Tab and Option-Tab, turn on “Press Tab to highlight each item on a webpage” in the Advanced pane of Safari preferences.
https://support.apple.com/guide/safari/keyboard-and-other-shortcuts-cpsh003/mac