JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<body>
<style>
::highlight(example-highlight) {
    background-color: yellow;
}
</style>
<span id="container">
  0123456789<div id=host>
  <template shadowrootmode=open>
    <span>This line is in the shadow DOM</span>
  </template>
  </div>0123456789
</span>
<script>
  // Set a Highlight with a range like this one:
  // [0123456789
  //  This line is in the shadow DOM
  //  01234]56789
  let range = new Range();
  range.setStart(container.childNodes[0], 0);
  range.setEnd(container.childNodes[2], 5);
  CSS.highlights.set("example-highlight", new Highlight(range));
</script>