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 thehost
element as a whole - if one still likes to preserve the
host
, clearing the Shadow DOM with something likee.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.