JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<span>This is the first span.</span>
<span class="shadow">This is the second span.  Try to select me!</span>
<span>This is the third span.  I can still be found with control-F, though.</span>

CSS

span {
    display: block;
    margin: 10px 0;
}

JavaScript

var shadows = document.getElementsByClassName("shadow");

Array.prototype.forEach.call(shadows, function (el) {
    var text = el.innerText;
    el.innerText = "";
    el.createShadowRoot()
        .innerHTML = "<style>:host:after{content:'" + text + "'}</style>";
});