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

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 in reaction to the findings in this question has been closed as a duplicate of 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)

因此，为了回答您的问题，从外观上看，文本选择处理与阴影 DOM 似乎是 a) 未指定的领域，以及 b) 有点难以实现。

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

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

Element with shadow root breaks text selection

html

javascript

css

firefox

shadow-dom