<!DOCTYPE html>
<style>
    span::selection { background-color: rgba(63, 128, 33, 0.95); color: yellow; }
</style>
<body onload="SelectText()">
    <div id="container">
        <span>DOM </span>
        <div id="shadowDiv" style="display:inline"></div>
        <span> DOM</span>
    </div>
    <div>
        Above Textual Selection should have Green background and yellow color on "DOM" <br>
        and Red background, Green color on "Shadow DOM".
    </div>
</body>
<script>
    var host = document.getElementById('shadowDiv');
    var root = host.attachShadow({mode: 'open'});
    root.innerHTML = '<style> span::selection { background-color: rgba(255, 0, 0, 0.95); color: green; } </style>' +
                        '<span>Shadow DOM </span>';

    function SelectText() {
        var ele = document.getElementById('container');
        var selection = window.getSelection();
        selection.setBaseAndExtent(ele.childNodes[1], 0, ele.childNodes[5], 1);
    }
</script>