首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何从模板中移除带有阴影DOM的HTML元素的阴影根?

如何从模板中移除带有阴影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中我看到:

代码语言:javascript
复制
<div id="content">
  #document-fragment
  <div id="plaindiv">Plain old div</div>
</div>

我需要向removeShadow()添加什么才能删除影子根并将内容元素完全重置为其初始状态?

removing_shadows.html

代码语言:javascript
复制
<!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>
EN

回答 2

Stack Overflow用户

回答已采纳

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

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

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

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

票数 4
EN

Stack Overflow用户

发布于 2019-08-21 10:28:49

rmcclellan是正确的,你不能真正“删除”一个ShadowRoot v2。但是,你可以假装它。

OuterHTML部分解

代码语言:javascript
复制
elementWithShadowDOMv2.outerHTML = elementWithShadowDOMv2.outerHTML;

然而,有一个重要的警告:虽然没有视觉上的改变,但elementWithShadowDOMv2仍然使用ShadowDOMv2引用销毁的元素,就像elementWithShadowDOMv2.parentNode.removeChild( elementWithShadowDOMv2 )被调用一样。这也会“移除”元素上的事件侦听器。观察下面的演示。

代码语言:javascript
复制
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
  );
}
代码语言:javascript
复制
<div id="add-shadow-here">Text Hidden By Shadow DOM</div>
addShadowHere.parentNode => <input readonly="" id="parent-value" />

请注意,删除ShadowDOM后,蓝色边框如何停止工作。这是因为事件侦听器不再在新元素上注册:事件侦听器仍然在已从DOM中删除的旧元素上注册。

因此,您必须刷新对该元素的任何引用,并重新附加任何事件侦听器。下面是一个如何重新获得对新元素的引用的示例。

代码语言:javascript
复制
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;
}

如果您需要访问元素,这些元素自然会被现有的阴影根隐藏起来,并且在驱逐阴影根之后会暴露出来,那么这里有一个替代方法,可以完美地保留这些节点。

代码语言:javascript
复制
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;
}

工作解决方案

代码语言:javascript
复制
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));
}
代码语言:javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20090059

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档