Question

我尝试克隆影子根，以便我可以将<content></content>的实例与其对应的分布式节点交换。

我的方法：

var shadowHost = document.createElement('div');
var shadowRoot = shadowHost.createShadowRoot();

var clonedShadowRoot = shadowRoot.cloneNode(true);

不起作用，因为＆＃34; ShadowRoot节点不可克隆。＆＃34;

这样做的动机是我希望检索组合的阴影树，以便我可以使用渲染的HTML标记。

由于Shadow DOM的性质，这可能不起作用，克隆过程可能会破坏对分布式节点的引用。

组合影子树可能是一个原生功能，但是通过w3c规范搜索，我无法找到这样的方法。

有这样的原生方法吗？或者，如果不这样，手动遍历（在过程中复制树）会起作用吗？

Answer 1

好。这有点疯狂，但这是我编写的例程，该例程将克隆shadowRoot的子级。这符合V1规范。

function cloneShadow(shadow) {
  const frag = document.createDocumentFragment();

  var nodes = [...shadow.childNodes];
  nodes.forEach(
    node => {
      node.remove();
      frag.appendChild(node.cloneNode(true));
      shadow.appendChild(node);
    }
  );

  return frag;
}

const s1 = document.querySelector('.shadow1');
const s2 = document.querySelector('.shadow2');

s1.attachShadow({mode:'open'}).innerHTML = `<h1>Header</h1>
<p>Content in a paragraph</p><slot></slot>`;

setTimeout(() => {
  s2.attachShadow({mode:'open'}).appendChild(cloneShadow(s1.shadowRoot));}, 1000);

.shadow1 {
  background-color: #F88;
}

.shadow2 {
  background-color: #88F;
}

<div class="shadow1">
  <p>SHADOW 1</p>
</div>
<div class="shadow2">
  <p>SHADOW 2</p>
</div>

我不得不从shadowDOM中删除每个节点，然后对其进行克隆，然后将其附加回shadowRoot中。

我什至添加了setTimeout，以便您可以随时看到它的工作状态。

它甚至可以用于插槽。

Answer 2

也许您要尝试完成更多工作，但是解决无法使用guard let array = optionalArray , !array.isEmpty else {return}的一种方法似乎是创建镜像cloneNode，然后“克隆”该镜像。 ShadowRoot。例如：

innerHTML

如何克隆ShadowRoot？

2 个答案: