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