Question

将重现问题的步骤：

（1）在Chrome浏览器中运行以下代码

（2）尝试双击单词＆＃34; Second＆＃34;在这两个部分＆＃34;使用Shadow dom＆＃34; ＆安培; ＆＃34;没有影子dom＆＃34;。

预期结果：单词＆＃34; Second＆＃34;应该被选中（因为它在第-2节中工作）

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

＆＃13;

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;
});

＆＃13;

<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>

＆＃13;

Answer 1

行为不是由于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>

鼠标双击时的文本选择不适用于shadow-dom

1 个答案: