具有阴影根的元素会破坏文本选择

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>

我也希望选择具有阴影根的文本片段。

如何在Firefox中使其工作？是否有一些CSS属性可以控制此行为？

奖金问题：Firefox是否按照规范在这里表现正常？还是一个错误？ （我在Bugzilla中找不到与此有关的任何错误）。

我尝试将display设置为inline并将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已作为this bug的副本被关闭。

关于第二个错误报告的最新评论对此有所启示：

  

问：现在要修复70，为时已晚，但是由于我们看到了一些重复的问题，您能否再看一遍，也许目标是修复72？还是这是更大项目的一部分？

     

A：在启用Shadow DOM时实施不同的选择处理是一项艰巨的任务，并且这项工作正在进行中。   （没有真正指定使用Shadow DOM进行选择处理）

所以要回答您的问题，从外观上看，与阴影DOM一起进行文本选择处理似乎是a）未指定领域，b）难以实现。

至少在关于Firefox中当前的处理方法不是他们想要的那样达成共识。