如何从模板中使用shadow DOM装饰的HTML元素中删除阴影根？[网站组件]

Question

如何从模板中使用shadow DOM装饰的HTML元素中删除阴影根？[网站组件]

wjo*_*son 9 html web-component shadow-dom html5-template

我在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>

Run Code Online (Sandbox Code Playgroud)

我需要添加什么来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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

rmc*_*lan 5

添加影子根后就无法将其删除。但是，您可以将其替换为较新的。

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

您可以将 Shadow 根替换为仅包含<content>伪元素的新 Shadow 根，以将 light DOM 中的所有内容插入到 Shadow DOM 中。到那时，据我所知，它在功能上相当于根本没有影子 DOM。

Answer 2

Gul*_*rYA 5

Shadow DOM的规范从v0移到了v1。

更改之一是，在v1中，无法自行创建影子根目录，并且host元素可能仅包含一个影子根目录。

因此，用新的空白影子根替换影子根的答案似乎不再有效。

归档时间：	12 年前
查看次数：	18949 次
最近记录：	6 年，3 月前