From 661481a05801c77992ed0f27e0cc3d0b0ce25b1d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 5 Mar 2019 10:02:50 +0100 Subject: [PATCH] FIX an issue when re-rendering lit-html elements after rendering a non-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 | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app/polymer/src/client/preview/render.js b/app/polymer/src/client/preview/render.js index c290eb4dc374..872d8eb7a9f9 100644 --- a/app/polymer/src/client/preview/render.js +++ b/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 = '
'; + } else if (!rootElement.querySelector('[id="root-inner"]')) { + rootElement.innerHTML = '
'; } - render(element, rootElement); + const renderTo = rootElement.querySelector('[id="root-inner"]'); + + render(element, renderTo); } else { rootElement.innerHTML = ''; rootElement.appendChild(element);