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

【问题标题】：Inserting a toolbar into page using Shadow DOM使用 Shadow DOM 将工具栏插入页面
【发布时间】：2015-02-04 23:12:02
【问题描述】：

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

该过程在其他地方使用 iframe 进行了详细记录，但使用 Shadow DOM 这样做是我正在努力解决的问题。

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

【问题讨论】：

标签： javascript css shadow-dom

【解决方案1】：

如果要插入影子 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
});

【讨论】：