我注意到，如果在影子 DOM 内的任何地方使用
tabindex<html lang="en"><input id="__yoroi_connector_api_injected_type" type="hidden" value="prod">
<head>
<meta charset="UTF-8">
<title>Shadow DOM selection example</title>
</head>
<body>
<div id="app-root"></div>
</body>
</html>
<script>
init();
function init() {
let el = document.querySelector('#app-root');
const shadowContainerWrapper = document.createElement("div");
shadowContainerWrapper.id = "app-root";
el.appendChild(shadowContainerWrapper);
shadowContainerWrapper.attachShadow({mode: "open", delegatesFocus: true});
const body = document.createElement("body");
body.innerHTML =
"<div>Unable to highlight by double clicking</div>\n" +
"<div tabindex=\"0\">Highlights on double click</div>\n"
shadowContainerWrapper.shadowRoot.appendChild(body);
}
</script>
</body>
</html>工作中（无
tabindex<html lang="en"><input id="__yoroi_connector_api_injected_type" type="hidden" value="prod">
<head>
<meta charset="UTF-8">
<title>Shadow DOM selection example</title>
</head>
<body>
<div id="app-root"></div>
</body>
</html>
<script>
init();
function init() {
let el = document.querySelector('#app-root');
const shadowContainerWrapper = document.createElement("div");
shadowContainerWrapper.id = "app-root";
el.appendChild(shadowContainerWrapper);
shadowContainerWrapper.attachShadow({mode: "open", delegatesFocus: true});
const body = document.createElement("body");
body.innerHTML =
"<div>Unable to highlight by double clicking</div>\n" +
"<div>Highlights on double click</div>\n"
shadowContainerWrapper.shadowRoot.appendChild(body);
}
</script>
</body>
</html>我对shadow DOM的使用是否不正确？
重构为最少所需代码，双击即可工作
所以你的代码中有一些东西阻止了它。
从失败的代码开始，逐行将其重构为这段代码，看看哪里出了问题。
<div id="app"></div>
<script>
app.attachShadow({
mode: "open",
}).innerHTML =
"<div>Unable to highlight by double clicking</div>\n" +
"<div>Highlights on double click</div>\n"
</script>