javascript – ShadowRoot的getSelection().getRangeAt(0)在Google Chrome 35中返回不正确的Range对象

我们正在为我们的客户开发一个使用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).

当我按照建议here尝试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);

……但它没有正常工作.有任何想法吗？

解决方法:

似乎这是我报告的一个错误here并且在问题线程结束时由铬团队确认.

标签：javascript,html5,polymer,dart,shadow-dom
来源： https://codeday.me/bug/20190629/1321607.html