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

Question

如何使用下推所有其他内容的阴影 DOM 将 "toolbar" 样式 header 插入页面？

这个过程在其他地方使用 iframe 有很好的记录，但是使用 Shadow DOM 是我正在努力的事情。

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

Answer 1

如果您想插入阴影 DOM，一种方法是创建自定义元素，然后将其插入 DOM。您可以以静态方式执行此操作（即简单地替换您的 iframe 所在的位置），或者您可以在页面上使用 JavaScript 运行动态插入它。

此 fiddle 展示了创建自定义元素的基础知识 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
});

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

Inserting a toolbar into page using Shadow DOM

javascript

css

shadow-dom