javascript - 具有阴影根的元素会中断文本选择

Question

在 Firefox 中，影子根文本内容似乎不像页面上的任何其他文本那样可供用户选择。

演示:执行下面的代码片段并在结果框中按 Ctrl + A。这是发生了什么:

let wShadow = document.querySelector('#with-shadow-root')

let p = document.createElement('p')
p.textContent = 'With shadow root'

wShadow.attachShadow({ mode: 'open' })
wShadow.shadowRoot.appendChild(p)

<div>
  Some text.
  <p id="with-shadow-root"></p>
  Some more text.
</div>

<div>
  Some text.
  <p>Without shadow root.</p>
  Some more text.
</div>

我希望With shadow root 文本片段也被选中。

如何在 Firefox 中实现这一点？是否有一些 CSS 属性可以控制此行为？

额外的问题:Firefox 在这里是否按照规范正确运行？或者这是一个错误？ (我在 Bugzilla 中找不到任何关于此的错误)。

我尝试将显示设置为内联，并且 user-select CSS 属性无济于事。

在两种阴影模式下，自定义元素也会发生同样的情况:

class MyPOpen extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({
      mode: 'open'
    });
    this.text = document.createTextNode('With open shadow root');
  }

  connectedCallback() {
    this.shadowRoot.appendChild(this.text);
  }
}

customElements.define('my-p-closed', MyPOpen);

class MyPClosed extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({
      mode: 'closed'
    });
    this.text = document.createTextNode('With closed shadow root');
  }

  connectedCallback() {
    this.shadow.appendChild(this.text);
  }
}

customElements.define('my-p-open', MyPClosed);

my-p-open, my-p-closed { display: block; }

<div>
  Some text.
  <my-p-open></my-p-open>
  <my-p-closed></my-p-closed>
  Some more text.
</div>

<div>
  Some text.
  <p>Without shadow root.</p>
  Some more text.
</div>

Answer 1

bug report I filed作为对这个问题调查结果的 react ，已作为this bug 的副本关闭。 .

关于第二份错误报告的最后评论对此有所说明:

Q: Too late for a fix in 70 but as we're seeing some duplicates, could you take another look and maybe aim for a fix in 72? Or is this part of some bigger project?

A: Implementing different Selection handling when Shadow DOM is enabled is a massive task, and that work is ongoing.(Selection handling with Shadow DOM isn't really specified)

所以回答你的问题，从它的外观来看，文本选择处理与 shadow DOM 的结合似乎是 a) 未指定的领域，b) 有点难以实现。

至少大家一致认为 Firefox 中的当前处理不是他们想要的。