使用Shadow DOM将工具栏插入页面

Inserting a toolbar into page using Shadow DOM

本文关键字：插入 工具栏 Shadow DOM 使用      更新时间：2023-09-26

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

这个过程在其他地方使用iframe有很好的记录，但使用Shadow DOM这样做是我很难做到的。

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

如果您想插入shadow DOM，一种方法是创建一个自定义元素，然后将其插入到DOM中。你可以用静态的方式来做这件事（也就是说，让它简单地替换你的iframe所在的位置），或者你可以用在页面上运行的JavaScript动态插入它。

这个小提琴展示了创建自定义元素的基础知识http://jsfiddle.net/h6a12p30/1/

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

和类似的Javascript

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
});
相关文章：