Question

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

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

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

Answer 1

如果要插入shadow DOM的东西，一种方法是创建自定义元素，然后将其插入DOM。您可以以静态方式执行此操作（即，只需将iframe替换为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
});

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

1 个答案: