title: How to remove a shadow root from an HTML element adorned with a Shadow DOM from a template?
body: <p>I'm exploring imports, templates, shadow DOM and custom elements in Chrome Canary (33.0.1712.3). In a grid layout I have a particular content element (region of the display) that will display different web components or cloned light DOM fragments imported from files. </p>
  
  <p>However, I'm unable to redisplay ordinary HTML DOM once a shadow DOM has been added because I don't know how to remove the shadow root. Once created, the shadow root remains and interferes with the rendering of ordinary DOM. (I've looked at various W3C specs such as intro to web components, shadow DOM, templates, Bidelman's articles on HTML5 Rocks, etc.) I've isolated the problem in a simple example below:</p>
  
  <p>Click "show plain old div"; click "show shadowed template"; click "show plain old div". Inspect  in devtools after each click. After the third click, there is no output below the buttons and in devtools I am seeing:</p>
  
  <pre><code>&lt;div id="content"&gt;
    #document-fragment
    &lt;div id="plaindiv"&gt;Plain old div&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What do I need to add to removeShadow() to remove the shadow root and fully reset the content element to its initial state?</p>
  
  <p>removing_shadows.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
  
    &lt;template id="shadowedTemplateComponent"&gt;
      &lt;style&gt;
        div { background: lightgray; }
        #t { color: red; }
      &lt;/style&gt;
  
      &lt;div id="t"&gt;template&lt;/div&gt;
  
      &lt;script&gt;console.log("Activated the shadowed template component.");&lt;/script&gt;
    &lt;/template&gt;
  
    &lt;template id="plainDiv"&gt;
      &lt;div id="plaindiv"&gt;Plain old div&lt;/div&gt;
    &lt;/template&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div&gt;
    &lt;input type="button" value="show plain old div" onclick="showPlainOldDiv()"/&gt;
    &lt;input type="button" value="show shadowed template" onclick="showShadowTemplate()"/&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    function removeChildren(elt) {
      console.log('removing children: %s', elt);
      while (elt.firstChild) {
        elt.removeChild(elt.firstChild);
      }
    }
    function removeShadow(elt) {
      if (elt.shadowRoot) {
        console.log('removing shadow: %s', elt);
        removeChildren(elt.shadowRoot); // Leaves the shadow root property.
        // elt.shadowRoot = null; doesn't work
        // delete elt.shadowRoot; doesn't work
        // What goes here to delete the shadow root (#document-fragment in devtools)?
      }
    }
  
    function showPlainOldDiv() {
      console.log('adding a plain old div');
      var host = document.querySelector('#content');
      removeChildren(host);
      removeShadow(host);
      var template = document.querySelector('#plainDiv');
      host.appendChild(template.content.cloneNode(true));
    }
  
    function showShadowTemplate() {
      console.log('adding shadowed template component');
      var host = document.querySelector('#content');
      removeChildren(host);
      removeShadow(host);
      var template = document.querySelector('#shadowedTemplateComponent');
      var root = host.shadowRoot || host.webkitCreateShadowRoot();
      root.appendChild(template.content.cloneNode(true));
    }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>