关于两个不常用的API createRange（处理tooltip展示）和 Shadow DOM（样式隔离）还有 Selection做复制粘贴功能的API

1.createRange是我在表格里面看到关于tooltip 当文字长度过长就会有tip没有就不会展示 一直在想这个问题然后看了源码 发现实现就是用这个实现 先附源码

        <template v-if="renderType === 'normal'">
            <template v-if="column.tooltip">
                <Tooltip transfer :content="row[column.key]" :theme="column.tooltipTheme ? column.tooltipTheme : tableRoot.tooltipTheme" :disabled="!showTooltip" :max-width="column.tooltipMaxWidth ? column.tooltipMaxWidth : tableRoot.tooltipMaxWidth" class="ivu-table-cell-tooltip">
                    <span ref="content" @mouseenter="handleTooltipIn" class="ivu-table-cell-tooltip-content">{{ row[column.key] }}</span>
                </Tooltip>
            </template>
            <span v-else>{{row[column.key]}}</span>
        </template>
            handleTooltipIn () {
                const $content = this.$refs.content;
                let range = document.createRange();
                range.setStart($content, 0);
                range.setEnd($content, $content.childNodes.length);
                const rangeWidth = range.getBoundingClientRect().width;
                this.showTooltip = rangeWidth > $content.offsetWidth;
                range = null;
            },

var range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
这里startNode
指startContainer， 自然就是指dom元素了，
2.shadow Dom
vide标签为例

Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中——它以 Shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样

let shadowRoot = shadowHostElement.attachShadow({mode: 'open'});
let shadowRoot = shadowHostElement.attachShadow({mode: 'closed'});
open 表示可以通过页面内的 JavaScript 来获取 Shadow DOM，例如使用 Element.shadowRoot 属性
let shadowRoot = shadowHostElement.shadowRoot;
如果将 mode 设置为 closed，那么elementRef.shadowRoot 将会返回 null

栗子
var style = document.createElement('style');
style.textContent = `
    .title {
        color: blue;
    }
`;
shadow.appendChild(style);

// 使用 link 标签为 Shadow DOM 添加样式
const linkElem = document.createElement('link');
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('href', 'style.css');
shadow.appendChild(linkElem);

3.Selection

// 对选定的文字进行加粗
document.selection.createRange().execCommand("Bold")
//  获取选定的文本
document.selection.createRange().text
// 获取选定的html
document.selection.createRange().htmlText
// 清除选定的内容
document.selection.clear()
// 弹出选择区的类型( None,Text,...)
document.selection.type
 // 获取选取区的文字
var range = document.selection.createRange();  // 创建文本区域对象
range.moveStart("character",2);                          // 选定区起始点向后移动2个字符
range.moveEnd("character",1);                          // 选定区结束点向后移动1个字符
console.log(range.text)

参考https://blog.csdn.net/qq_31967569/article/details/104332853