Text selection on mouse double click is not working in case of styling provided in shadow-dom

Question

What steps will reproduce the problem:

(1)Run below code in chrome browser

(2)Try to Double click on word "Second" in both sections "With Shadow dom" & "Without Shadow dom".

expected result: The word "Second" should get selected (as it is working in section -2)

actual behaviour: Double click does not select the text.

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

The behavior is not due to the style inside the Shadow DOM but to the contenteditable attribute you've set to the <p> container block that will interfere with the Shadow DOM tree event chain: the contenteditable block will get the focus and position the cursor at the beginning of the editable text, thus canceling the text selection (which you can see briefly).

You should instead apply the contenteditable="true" attribute to the <span> element directly to avoid the focus issue with double-click.

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>