How to remove a shadow root from an HTML element adorned with a Shadow DOM from a template?

The spec of Shadow DOM moved from v0 to v1.

One of the changes is that in v1 there is no way to create shadow root on itself and the host element may contain only one shadow root.

So it seems like the answer of replacing the shadow root with a new blank shadow root is not valid anymore.

Solution paths:

• if the host element self (div in your example) has no special value beside holding that Shadow DOM, one can just replace the host element as a whole
• if one still likes to preserve the host, clearing the Shadow DOM with something like e.shadowRoot.innerHTML = '' might be sufficient

You can't remove a shadow root once you add it. However, you can replace it with a newer one.

As mentioned here, http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/, the newest shadow root "wins" and becomes the rendered root.

You can replace your shadow root with a new shadow root that only contains the <content> pseudo-element to insert everything from the light DOM back into the shadow DOM. At that point, as far as I know it will be functionally equivalent to having no shadow DOM at all.