ShadowRoot的getSelection（）。getRangeAt（0）在Google Chrome 35中返回不正確的Range對象

Question

我們正在為我們的客戶開發一個使用dart lang和聚合物組件的應用程序。 我們的一個自定義組件即datagrid使用<div contenteditable></div>來輸入datagrid單元格的值。 我還想提供自定義格式化功能，所以我不得不重寫按鍵事件。 當我想在Chrome 35中的內容可編輯div元素中的插入位置創建新的HTML節點時，問題就出現了問題（可能是所有支持Shadow DOM的webkit瀏覽器，而不是通過polyfill）。

當我使用window.getSelection().getRangeAt(0)來獲取當前插入位置時，新節點被添加到body元素的開頭而不是div 。 在Firefox和IE 11中它雖然很好用（使用polyfill）。

當我按照這里的建議嘗試this.shadowRoot.getSelection().getRangeAt(0) ，它不能正常工作，因為它返回不正確的Range對象（一個bug或一個功能？）。 然而，當我記錄Selection對象時，似乎所有偏移都是正確的，這意味着它可以以某種方式解決，但是那個在SO上提出類似問題的人還沒有發布他是如何做到的。

所以我不知道，當內容可編輯的div包含多個HTML節點時，如何從給定的偏移量創建一個Range對象，因為當你將一個換行符放到單詞的中間並立即刪除它時，瀏覽器會創建多個節點（如一個側面的問題，它是否正常？它不會導致內存泄漏嗎？）。 然后在Chrome控制台中看起來像這樣（＃cell-input這里有4個節點，盡管它只包含連續字符串“Marek”）：

<div contenteditable="true" id="cell-input">
    "M"
    "ar"
    "ek"
    <br>
</div>

我嘗試使用類似的東西（它只是一個偽代碼）：

offset = shadowRoot.getSelection().extentOffset;
element = document.querySelector('cell-input');

range = document.createRange();
range.setStart(element.children.first, offset );
range.setEnd(element.children.first, offset);
range.collapse(false);

......但它沒有正常工作。 有任何想法嗎？

Answer 1

似乎這是我在這里報告的錯誤，並且在問題線程結束時由鉻團隊確認。

Answer 2

我創建了一個plunk，它顯示了我們如何保存shadowRoot選擇范圍並在需要時使用它。 問題是this.shadowRoot.getSelection（）。getRangeAt（0）返回不正確的范圍，你要通過getSelection（）從set.shadowRoot.getSelection（）創建范圍.setStart，getSelection（）。setEnd。 如需更多了解，請參閱插件

shadowRoot.getSelection.getRangeAt(0) instead use  
var selRange=document.createRange();
var shadowRootSelection = this.shadowRoot.getSelection();
selRange.setStart(shadowRootSelection.anchorNode, shadowRootSelection.anchorOffset);
        selRange.setEnd(shadowRootSelection.focusNode, shadowRootSelection.focusOffset);