鼠标双击的文本选择在阴影区提供的样式情况下不起作用。

Question

哪些步骤将重现问题：

(1)在chrome浏览器中运行下面的代码

(2)双击“有影子”和“无阴影”两部分中的“第二”字。

预期结果:应选择“第二”一词(因为该词在第2节中起作用)。

实际行为:双击不选择文本。

​

var arr = document.querySelectorAll('#some-run');
var spans = Array.from(arr);
spans.forEach(function(span) {
  var shadow = span.createShadowRoot();
  var template = document.querySelector('#style-template');
	shadow.innerHTML = template.innerHTML;
});

<p>Try to Double click on "Second" in the With and without shadow-dom sections below and observe the behaviour</p>
<p contentEditable="true" style={display: block;}>
  <b>With Shadow dom</b><br/>
  <span id="some-run">First</span>
  <span id="some-run">Second</span>
  <span id="some-run">Third</span>
</p>
<p contentEditable="true" style={display: block;}>
  <b>Without Shadow dom</b><br/>
  <span id="some-run-2">First</span>
  <span id="some-run-2">Second</span>
  <span id="some-run-2">Third</span>
</p>
<template id="style-template">
    <style>
      :host {
        opacity: 1; /* A dummy style, can be replaced with anything else*/ 
      }
    </style>
    <content></content>
</template>

​

Answer 1

这种行为不是由于Shadow DOM中的样式，而是由于您设置为<p>容器块的<p>属性将干扰Shadow DOM树事件链:可内容块将获得焦点并将光标定位到可编辑文本的开头，从而取消文本选择(您可以简要地看到)。

相反，您应该将contenteditable="true"属性直接应用于<span>元素，以避免双击出现focus问题。

​

var template = document.querySelector('#style-template')
Array.from(document.querySelectorAll('#some-run'))
  .forEach(function(span) {
    span.createShadowRoot()
      .innerHTML = template.innerHTML
  });

<p>
  <b>With Shadow dom</b><br/>
  <span id="some-run">First</span>
  <span id="some-run"><span contenteditable>Second</span></span>
  <span id="some-run">Third</span>
</p>
<template id="style-template">
    <content></content>
</template>

​