<button> 元素的存在可防止在 Chrome 中使用带有阴影 DOM 的 Web 组件中的 React App 突出显示文本

Question

一个奇怪的问题，但我在这里有一个最小可重现的例子：https://codesandbox.io/s/falling-architecture-hvrsd?file=/src/index.js

使用顶部的 div，您可以使用 WHY? 文本在显示和隐藏按钮之间切换，这将分别阻止和启用，突出显示底部的文本 Try and Highlight This Text 和 You only can if the button isn't shown.

我正在使用 Web 组件和 Shadow DOM，因为这是 chrome 扩展，我希望避免样式冲突。

您可以注释掉 index.js 中的 Web 组件内容，直接使用 ReactDOM.render() 渲染演示，不会观察到这种行为。

我也不确定它是否仅限于导致此问题的 <button> 个元素。

编辑：它适用于 Firefox，但不适用于 Chrome 或最新的 Chromium Edge

let shadow = document.getElementById("root").attachShadow({ mode: 'open', delegatesFocus: true });
const button = document.createElement('button');
button.innerText='Test';

const p = document.createElement('p');
p.innerText = 'Cannot highlight this in Chrome';
shadow.appendChild(button);
shadow.appendChild(p);

<div id="root"></div>

Answer 1

虽然我不确定内部工作原理，但看起来它与 const shadowRoot = this.attachShadow({ ... delegatesFocus: true}) 有关。如果您将 delegatesFocus 设置为 false，选择将正常工作。 MDN 表示这是实验性的并且仅 chrome：https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus

<button> 元素的存在可防止在 Chrome 中使用带有阴影 DOM 的 Web 组件中的 React App 突出显示文本

Presence of a <button> element prevents text being highlighted with React App in Web Component with Shadow DOM in Chrome

javascript

web-component

shadow-dom

reactjs

material-ui