1

哪些步骤将重现该问题：

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

(2)尝试在“With Shadow dom”和“Without Shadow dom”两个部分中双击“Second”一词。

预期结果：应该选择“第二”这个词（因为它在第-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>

4

1 回答 1

2

该行为不是由于 Shadow DOM 内部的样式，而是contenteditable由于您为<p>容器块设置的属性，该属性会干扰 Shadow DOM 树事件链：contenteditable 块将获得焦点并将光标定位在可编辑的文本，从而取消文本选择（您可以简单地看到）。

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

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>

于 2017-12-02T00:07:44.057 回答