为什么 [contenteditable] 在 Chrome 117（和 118 beta）中变得无法聚焦

问题描述 投票：0回答：1

我一直在开发一个项目，该项目在 

<slot>
中创建带有 
shadowRoot
的自定义元素。从 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>

此错误仅出现在 Chrome 版本 117（和 118 beta）中，而不出现在任何其他浏览器中（我可以在我的 Mac 上测试）。大家有什么想法吗？

javascript google-chrome shadow-dom custom-element
1个回答
0
投票

这似乎是 Chrome 中的一个错误（bug #1484447）。最近提交了一个补丁 (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());
    }
  }
}

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.