如何克隆 ShadowRoot？

Question

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

我的做法：

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

var clonedShadowRoot = shadowRoot.cloneNode(true);

不起作用，因为“ShadowRoot 节点不可克隆。”

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

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

编写影子树很可能是本机功能，但在搜索了 w3c 规范后，我找不到这样的方法。

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

Answer 1

如果您尝试深度克隆一个可能包含一个或多个嵌套阴影树的节点，那么您需要从该节点遍历 DOM 树并沿途检查阴影根。如果对先前建议浅克隆方法有缺陷的答案感兴趣，请参阅编辑历史记录。

const deepClone = (host) => {
  const cloneNode = (node, parent) => {
    const walkTree = (nextn, nextp) => {
      while (nextn) {
        cloneNode(nextn, nextp);
        nextn = nextn.nextSibling;
      }
    };
    
    const clone = node.cloneNode();
    parent.appendChild(clone);
    if (node.shadowRoot) {
      walkTree(node.shadowRoot.firstChild, clone.attachShadow({ mode: 'open' }));
    }
  
    walkTree(node.firstChild, clone);
  };
  
  const fragment = document.createDocumentFragment();
  cloneNode(host, fragment);
  return fragment;
};

// Example use of deepClone...

// create shadow host with nested shadow roots for demo
const shadowHost = () => {
  const host = document.createElement('div');
  const nestedhost = document.createElement('p');
  nestedhost.attachShadow({mode: 'open'}).appendChild(document.createElement('span'));
  host.attachShadow({mode: 'open'}).appendChild(nestedhost);
  return host;
};

// return fragment containing deep cloned node
const fragment = deepClone(shadowHost());
// deep cloned node
console.log(fragment.firstChild); 
// shadow tree node
console.log(fragment.firstChild.shadowRoot.firstChild);
// nested shadow tree node
console.log(fragment.firstChild.shadowRoot.firstChild.shadowRoot.firstChild);

Answer 2

好的。这有点疯狂，但这是我编写的一个例程，它将克隆 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，这样你就可以看到它随时可用。

它甚至适用于插槽。