shadow-host-div-with-text.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <style>
    body, #host {
      border: 0;
      margin: 0;
      padding: 0;
      font: 16px sans-serif;
    }
  </style>
</head>
<body>
  <template>
    <style>
      span::selection { background: rgba(255, 0, 0, 0.95); }
    </style>
    <span>
      Some hearts are diamonds some hearts are stones
    </span>
  </template>
  <div id=host></div>
  <script>
    var host = document.querySelector('#host');
    var template = document.querySelector('template');
    var root = host.attachShadow({mode: 'open'});
    root.appendChild(template.content);
    var span = root.querySelector('span');
    
    var selection = window.getSelection();
    selection.setBaseAndExtent(span.firstChild, 2, span.firstChild, 54);
  </script>
</body>
</html>

chromium/third_party/blink/web_tests/fast/selectors/shadow-host-div-with-text.html