FIX an issue when re-rendering lit-html elements after rendering a no…

…n-lit-html element

It seems the mountNode becomes stateful after a render has occurred in lit-html.
Since storybook is changing the dom beyond lit-html, it gets "confused" and throws an error because it's unable to remove
some nodes. I guess it's trying to do reconciliation or cleanup, and it's missing state or it's state is inconsistent
with the actual dom.

By adding a extra inner root node that gets reset when switching stories we make lit-html mount correctly

app/polymer/src/client/preview/render.js

@@ -1,6 +1,6 @@
 import { document } from 'global';
 import { stripIndents } from 'common-tags';
-import { html, render, TemplateResult } from 'lit-html';
+import { render, TemplateResult } from 'lit-html';
 
 const rootElement = document.getElementById('root');
 
@@ -33,9 +33,13 @@ export default function renderMain({
     // Since we reuse `rootElement` for all stories, remove the stored instance first.
     // But forceRender means that it's the same story, so we want too keep the state in that case.
     if (!forceRender) {
-      render(html``, rootElement);
+      rootElement.innerHTML = '<div id="root-inner"></div>';
+    } else if (!rootElement.querySelector('[id="root-inner"]')) {
+      rootElement.innerHTML = '<div id="root-inner"></div>';
     }
-    render(element, rootElement);
+    const renderTo = rootElement.querySelector('[id="root-inner"]');
+
+    render(element, renderTo);
   } else {
     rootElement.innerHTML = '';
     rootElement.appendChild(element);