Javascript 使用阴影DOM将工具栏插入页面

如何使用向下推送所有其他内容的阴影DOM将“工具栏”样式的标题插入页面

其他地方使用iframe对该过程进行了很好的记录，但是使用shadowdom进行记录是我正在努力解决的问题

---

iframe通常不允许iframe中的元素与页面内容的其余部分重叠，因此它会阻止在所述工具栏中创建干净的界面。

如果要插入阴影DOM，一种方法是创建自定义元素，然后将其插入DOM。您可以通过静态方式（即，让它简单地替换iframe的位置），也可以使用页面上运行的JavaScript动态插入iframe

此提琴显示了创建自定义元素的基础知识

<template id="customtoolbar">
    <p>My toolbar</p>
</template>
<custom-toolbar></custom-toolbar>

var CustomToolbar = Object.create(HTMLElement.prototype);
CustomToolbar.createdCallback = function() {
    var shadowRoot = this.createShadowRoot();
    var clone = document.importNode(customtoolbar.content, true);
    shadowRoot.appendChild(clone);
};

var CToolbar = document.registerElement('custom-toolbar', {
  prototype: CustomToolbar
});