我在Chrome Canary（33.0.1712.3）中探索导入，模板，影子DOM和自定义元素 . 在网格布局中，我有一个特定的内容元素（显示区域），它将显示从文件导入的不同Web组件或克隆的轻型DOM片段 . 但是，一旦添加了阴影DOM，我就无法重新显示普通的HTML DOM，因为我不知道如何删除阴影根 . 一旦创建，阴影根就会保留并干扰普通DOM的呈现 . （我已经看过各种W3C规范，例如Web组件介绍，影子DOM，模板，Bidelman关于HTML5 Rocks的文章等） . 我在下面的一个简单示例中将问题分离出来：
点击“show plain old div”;点击“显示阴影模板”;点击“show plain old div” . 每次点击后检查devtools . 第三次点击后，按钮下面没有输出，在我看到的devtools中：
<div id="content">
#document-fragment
<div id="plaindiv">Plain old div</div>
</div>
我需要添加什么来删除shadowShadow（）以删除阴影根并将内容元素完全重置为其初始状态？
removing_shadows.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<template id="shadowedTemplateComponent">
<style>
div { background: lightgray; }
#t { color: red; }
</style>
<div id="t">template</div>
<script>console.log("Activated the shadowed template component.");</script>
</template>
<template id="plainDiv">
<div id="plaindiv">Plain old div</div>
</template>
</head>
<body>
<div>
<input type="button" value="show plain old div" onclick="showPlainOldDiv()"/>
<input type="button" value="show shadowed template" onclick="showShadowTemplate()"/>
<div id="content"></div>
</div>
<script>
function removeChildren(elt) {
console.log('removing children: %s', elt);
while (elt.firstChild) {
elt.removeChild(elt.firstChild);
}
}
function removeShadow(elt) {
if (elt.shadowRoot) {
console.log('removing shadow: %s', elt);
removeChildren(elt.shadowRoot); // Leaves the shadow root property.
// elt.shadowRoot = null; doesn't work
// delete elt.shadowRoot; doesn't work
// What goes here to delete the shadow root (#document-fragment in devtools)?
}
}
function showPlainOldDiv() {
console.log('adding a plain old div');
var host = document.querySelector('#content');
removeChildren(host);
removeShadow(host);
var template = document.querySelector('#plainDiv');
host.appendChild(template.content.cloneNode(true));
}
function showShadowTemplate() {
console.log('adding shadowed template component');
var host = document.querySelector('#content');
removeChildren(host);
removeShadow(host);
var template = document.querySelector('#shadowedTemplateComponent');
var root = host.shadowRoot || host.webkitCreateShadowRoot();
root.appendChild(template.content.cloneNode(true));
}
</script>
</body>
</html>
2 回答
添加后，您无法删除阴影根 . 但是，您可以用更新的替换它 .
正如这里提到的，http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/，最新的影子根"wins"并成为渲染的根 .
您可以使用仅包含
<content>伪元素的新影子根替换您的影子根，以便将来自light DOM的所有内容插入到影子DOM中 . 那时，据我所知，它在功能上等同于根本没有影子DOM .Shadow DOM的规范从v0移动到v1 .
其中一个变化是在v1中无法在自身上创建阴影根，并且主机元素可能只包含一个阴影根 .
所以似乎用新的空白阴影根替换阴影根的答案已经无效了 .