克隆/模仿选择范围

Question

选择完全符合我的需要：在TTS读取部件时设置选择，突出显示下一部分，依此类推......踢球者是：用户必须能够更改选择颜色。我可以通过::selection在css中设置此项，但我在扩展程序运行时无法更改它。选择颜色也与单词突出显示颜色混合，在css中更改z-index不会改变此混合。

应该是什么样的：

为了避免这种情况，我编写了下面的代码来设置范围的开始和结束以模仿这种行为，但是使用完全（颜色）控制，尽管在将样式应用于每个节点的parentElement时，在某些情况下，它将适用于div或p，突出显示文本的整个部分而不是句子： （不要介意句子算法，现在它并不重要）

//Start a range for the highlighting
let range = rangy.createRange();
//Set the range on the first element with an offSet of 0
range.setStart(document.getElementById('ali' + i), 0);

while (
    document.getElementById('ali' + i) !== null) {

    let element = document.getElementById('ali' + i);

    senArray.push(element.innerText);
    wordIdArray.push(i);

    if (
        element.innerText.indexOf('.') >= 0
        || element.innerText.indexOf('?') >= 0
        || element.innerText.indexOf('!') >= 0
    ) {
        break;
    }
    i++;
}

//Set the end of the range by getting the last element and its last offSet
let endOffset = document.getElementById('ali' + i).childNodes.length;
range.setEnd(document.getElementById('ali' + i), endOffset);

console.log(range);

//get nodes from range and apply style to parent element
let nodes = range.getNodes();
nodes.forEach(function (el) {
    el.parentNode("style", "background-color: " + readingUnitColor + ";")
});
//Make selection object, remove existing ranges (to be sure) and add the range to the selection object.
// let selection = window.getSelection();
// selection.removeAllRanges();
// selection.addRange(range);

我在这里使用rangy，但是我使用原生JS获得了相同的结果：

let CAContainer = range.commonAncestorContainer;
CAContainer.setAttribute("style", "background-color: " + readingUnitColor + ";");

我还尝试在一个范围内包装句子，但每当我将'<span id="id">'添加到范围的setStart部分时，chrome会在第一个节点之后立即自动关闭该标记，而不管'</span>'在该范围的setEnd。

敬请任何帮助或意见！