I'm trying to clone a shadow root, so that I may swap instances of <content></content> with their corresponding distributed nodes.

My approach:

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

var clonedShadowRoot = shadowRoot.cloneNode(true);

does not work, as "ShadowRoot nodes are not clonable."

The motivation for this is that I wish to retrieve the posed shadow tree, so that I may use the rendered HTML markup.

This may not work due to the nature of the Shadow DOM, the reference to the distributed nodes is likely to be broken by the cloning process.

Composing the shadow tree is likely to be a native feature, but having searched through the w3c spec, I was unable to find such a method.

Is there such a native method? Or, failing that, would manual traversal (replicating the tree in the process), work?

I'm trying to clone a shadow root, so that I may swap instances of <content></content> with their corresponding distributed nodes.

My approach:

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

var clonedShadowRoot = shadowRoot.cloneNode(true);

does not work, as "ShadowRoot nodes are not clonable."

The motivation for this is that I wish to retrieve the posed shadow tree, so that I may use the rendered HTML markup.

This may not work due to the nature of the Shadow DOM, the reference to the distributed nodes is likely to be broken by the cloning process.

Composing the shadow tree is likely to be a native feature, but having searched through the w3c spec, I was unable to find such a method.

Is there such a native method? Or, failing that, would manual traversal (replicating the tree in the process), work?

• javascript
• html
• dom
• clone
• shadow-dom

Share Improve this question Follow edited May 12, 2020 at 17:49 benvc 15.2k44 gold badges3838 silver badges5757 bronze badges asked Nov 27, 2014 at 11:48 VixVix 1,0661010 silver badges1616 bronze badges 3

• The lack of support in standard threw me off. It was solved somehow, I believe by traversing and replicating the structure, not by a simple clone. Were you to share a gist I would give it a look. Otherwise perhaps try to contact the ecma spec designers? – Vix Commented Mar 30, 2019 at 5:33
• 1 I don't understand the why you want to do this exactly. Is there any example that you can provide? Is using shadowRoot.innerHTML an option? – Dakota Jang Commented Apr 5, 2019 at 6:10
• I suppose you could take the innerHTML and assign it into an element, at that point traverse it as normal. I have not had need to revisit this yet – Vix Commented Apr 11, 2019 at 13:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

If you are trying to deep clone a node that may contain one or more nested shadow trees, then you will need to walk the DOM tree from that node and check for shadow roots along the way. See edit history if interested in the previous answer that suggested a flawed approach to shallow cloning.

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);

OK. This is a little crazy, but here is a routine I wrote that will clone the children of a shadowRoot. This conforms to the V1 spec.

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>

I had to remove each node from the shadowDOM and then clone it and then append it back into the shadowRoot.

I even added a setTimeout so you can see that it works at any time.

It even works with slots.