An unusual problem has arisen, but I have a concise example that demonstrates the issue: https://codesandbox.io/s/falling-architecture-hvrsd?file=/src/index.js
https://i.stack.imgur.com/CkL4g.png
https://i.stack.imgur.com/nDjuD.png
By utilizing the divs at the top, you can toggle between displaying and hiding a button with the text WHY?, which will respectively prevent or enable the highlighting of the text at the bottom saying Try and Highlight This Text and
You only can if the button isn't shownI am employing a Web Component and Shadow DOM for a chrome extension, aiming to avoid style conflicts.
If you comment out the web component section in index.js and directly render the demo with ReactDOM.render(), this behavior will not be present.
I am uncertain whether this issue is specific to only <button> elements.
EDIT: The functionality works in Firefox, but there are problems in Chrome or the latest version of 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>