我正在探索Chrome Canary (33.0.1712.3)中的导入、模板、阴影DOM和自定义元素。在网格布局中,我有一个特定的内容元素(显示区域),它将显示不同的web组件或从文件中导入的克隆的轻量级DOM片段。
但是,一旦添加了阴影DOM,我就无法重新显示普通的HTML DOM,因为我不知道如何删除阴影根。创建后,阴影根会保留下来,并干扰普通DOM的渲染。(我看过各种W3C规范,比如web组件简介、阴影DOM、模板、比德尔曼关于HTML5 Rock的文章等。)我已经在下面的一个简单示例中隔离了这个问题:
单击“显示普通旧div";单击”显示阴影模板“;单击”显示普通旧div“。每次单击后在devtools中进行检查。第三次单击后,按钮下方没有输出,在devtools中我看到:
<div id="content">
#document-fragment
<div id="plaindiv">Plain old div</div>
</div>
我需要向removeShadow()添加什么才能删除影子根并将内容元素完全重置为其初始状态?
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>
发布于 2014-01-02 07:53:14
一旦添加了卷影根,就不能将其删除。但是,您可以用较新的版本替换它。
正如这里提到的,http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/,最新的影子根“获胜”,并成为呈现的根。
您可以用一个只包含<content>
伪元素的新的影子根来替换您的影子根,以便将光DOM中的所有内容插入到影子DOM中。在这一点上,据我所知,它在功能上等同于根本没有阴影DOM。
发布于 2019-08-21 10:28:49
rmcclellan是正确的,你不能真正“删除”一个ShadowRoot v2。但是,你可以假装它。
OuterHTML部分解
elementWithShadowDOMv2.outerHTML = elementWithShadowDOMv2.outerHTML;
然而,有一个重要的警告:虽然没有视觉上的改变,但elementWithShadowDOMv2
仍然使用ShadowDOMv2引用销毁的元素,就像elementWithShadowDOMv2.parentNode.removeChild( elementWithShadowDOMv2 )
被调用一样。这也会“移除”元素上的事件侦听器。观察下面的演示。
var addShadowHere = document.getElementById("add-shadow-here");
addShadowHere.addEventListener("mouseenter", function() {
addShadowHere.style.border = '2em solid blue';
});
addShadowHere.addEventListener("mouseleave", function() {
addShadowHere.style.border = '';
});
var shadow = addShadowHere.attachShadow({mode:"open"});
var button = shadow.appendChild(document.createElement("button"));
button.textContent = "Click Here to Destroy The ShadowDOMv2";
button.addEventListener("click", function() {
addShadowHere.outerHTML = addShadowHere.outerHTML;
update();
});
update();
function update() {
// This just displays the current parent of the addShadowHere element
document.getElementById("parent-value").value = "" + (
addShadowHere.parentNode &&
addShadowHere.parentNode.cloneNode(false).outerHTML
);
}
<div id="add-shadow-here">Text Hidden By Shadow DOM</div>
addShadowHere.parentNode => <input readonly="" id="parent-value" />
请注意,删除ShadowDOM后,蓝色边框如何停止工作。这是因为事件侦听器不再在新元素上注册:事件侦听器仍然在已从DOM中删除的旧元素上注册。
因此,您必须刷新对该元素的任何引用,并重新附加任何事件侦听器。下面是一个如何重新获得对新元素的引用的示例。
function removeShadowWithCaveat(elementWithShadow) {
if (!elementWithShadow.parentNode) return elementWithShadow.cloneNode(true);
var parent = elementWithShadow.parentNode;
var prior = elementWithShadow.previousSibling;
elementWithShadow.outerHTML = elementWithShadow.outerHTML;
return prior.nextSibling || parent.firstChild;
}
如果您需要访问元素,这些元素自然会被现有的阴影根隐藏起来,并且在驱逐阴影根之后会暴露出来,那么这里有一个替代方法,可以完美地保留这些节点。
function removeShadowWithCaveat(elementWithShadow) {
if (!elementWithShadow.parentNode) return elementWithShadow.cloneNode(true);
var ref = elementWithShadow.cloneNode(true);
while (elementWithShadow.lastChild) ref.appendChild( elementWithShadow.lastChild );
elementWithShadow.parentNode.replaceChild(elementWithShadow, elementWithShadow);
return ref;
}
工作解决方案
var createShadowProp = (
"createShadowRoot" in Element.prototype ? "createShadowRoot" : "webkitCreateShadowRoot"
);
function removeChildren(elt) {
console.log('removing children: %s', elt);
while (elt.firstChild) {
elt.removeChild(elt.firstChild);
}
}
function removeShadowWithCaveat(elementWithShadow) {
if (!elementWithShadow.parentNode) return elementWithShadow.cloneNode(true);
var ref = elementWithShadow.cloneNode(true);
while (elementWithShadow.lastChild) ref.appendChild( elementWithShadow.lastChild );
elementWithShadow.parentNode.replaceChild(elementWithShadow, elementWithShadow);
return ref;
}
function showPlainOldDiv() {
console.log('adding a plain old div');
var host = document.querySelector('#content');
removeChildren(host);
// Remove the shadow
host = removeShadowWithCaveat(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);
// Remove the shadow
host = removeShadowWithCaveat(host);
var template = document.querySelector('#shadowedTemplateComponent');
var root = host.shadowRoot || host[createShadowProp]({
"open": true
});
root.appendChild(template.content.cloneNode(true));
}
<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>
<template id="shadowedTemplateComponent" style="display:none">
<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" style="display:none">
<div id="plaindiv">Plain old div</div>
</template>
还要注意供应商前缀的滥用(这是太多开发人员都有问题的问题)。您说得对,在提出这个问题时,只有createShadowRoot
的前缀版本(即webkitCreateShadowRoot
)。但是,您必须始终检查无前缀的createShadowRoot
版本是否可用,以防将来浏览器对其进行标准化(现在就是这样)。今天让你的代码工作可能很好,但几年后让你的代码工作是很棒的。
https://stackoverflow.com/questions/20090059
复制相似问题