问如何从模板中移除带有阴影DOM的HTML元素的阴影根？
EN

Stack Overflow用户

提问于 2013-11-20 15:39:44

回答 2查看 28.4K关注 0票数 12

我正在探索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>

html

web-component

shadow-dom

html5-template

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-01-02 07:53:14

一旦添加了卷影根，就不能将其删除。但是，您可以用较新的版本替换它。

正如这里提到的，http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/，最新的影子根“获胜”，并成为呈现的根。

您可以用一个只包含<content>伪元素的新的影子根来替换您的影子根，以便将光DOM中的所有内容插入到影子DOM中。在这一点上，据我所知，它在功能上等同于根本没有阴影DOM。

票数 4

Stack Overflow用户

发布于 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版本是否可用，以防将来浏览器对其进行标准化(现在就是这样)。今天让你的代码工作可能很好，但几年后让你的代码工作是很棒的。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20090059

复制

相似问题

问如何从模板中移除带有阴影DOM的HTML元素的阴影根？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从模板中移除带有阴影DOM的HTML元素的阴影根？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从模板中移除带有阴影DOM的HTML元素的阴影根？
EN