我一直在做一个创建自定义元素的项目，该元素在shadowRoot中具有<slot>.从Chrome 117的发布开始，如果有人点击一个可满足的div，元素就会获得焦点，他们就可以打字了，但如果你来回点击，那么该元素就不再是可聚焦的.下面是一个最小的例子(demo):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<input id="test-input" />
<example-component>
<div contenteditable="true">
<h1>Hello World!</h1>
<p>This is an example</p>
</div>
</example-component>
<script>
customElements.define(
"example-component",
class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<slot></slot>
`;
}
}
);
</script>
</body>
</html>这个错误只出现在Chrome版本117(和118测试版)中，而不会出现在任何其他浏览器中(我可以在我的Mac上测试).有谁有什么主意吗？