我一直在做一个项目,在shadowRoot
中创建一个带有<slot>
的自定义元素。从Chrome 117发布开始,如果有人点击contenteditable 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>
这个bug只出现在Chrome版本117(和118 beta)中,而不出现在任何其他浏览器中(我可以在我的Mac上测试)。有人有什么想法吗?
1条答案
按热度按时间xvw2m8pv1#
这似乎是Chrome(bug #1484447)中的一个bug。最近提交了一个补丁(src),更新了
/third_party/blink/renderer/core/css/resolver/style_resolver.cc
(第1193到1201行)并添加了以下代码:这允许影子主机节点查看其父节点,以查看它们是否可编辑。