javascript 为什么[contenteditable]在Chrome 117(和118测试版)中无法聚焦

ryoqjall 于 12个月前发布在 Java

关注(0)|答案(1)|浏览(117)

我一直在做一个项目，在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上测试）。有人有什么想法吗？

JavaScript

来源：https://stackoverflow.com/questions/77161028/why-does-contenteditable-become-unfocusable-in-chrome-117-and-118-beta

1条答案

按热度按时间

xvw2m8pv1#

这似乎是Chrome（bug #1484447）中的一个bug。最近提交了一个补丁（src），更新了/third_party/blink/renderer/core/css/resolver/style_resolver.cc（第1193到1201行）并添加了以下代码：

// contenteditable attribute (implemented by -webkit-user-modify) should
// be propagated from shadow host to distributed node.
if (!style_request.IsPseudoStyleRequest() && element.AssignedSlot()) {
  if (Element* parent = element.parentElement()) {
    if (const ComputedStyle* shadow_host_style =
            parent->GetComputedStyle()) {
      state.StyleBuilder().SetUserModify(shadow_host_style->UserModify());
    }
  }
}

这允许影子主机节点查看其父节点，以查看它们是否可编辑。

赞(0）回复(0）举报 12个月前

我来回答

javascript 为什么[contenteditable]在Chrome 117(和118测试版)中无法聚焦

1条答案

相关问题

热门标签

最新问答