fix: check if node is an element when removing slot attribute (#8533) (…

…#8538)

Co-authored-by: Serhii Kulykov <[email protected]>

packages/split-layout/src/vaadin-split-layout-mixin.js

@@ -55,7 +55,7 @@ export const SplitLayoutMixin = (superClass) =>
     /** @private */
     _cleanupNodes(nodes) {
       nodes.forEach((node) => {
-        if (!(node.parentElement instanceof this.constructor)) {
+        if (node.nodeType === Node.ELEMENT_NODE && !(node.parentElement instanceof this.constructor)) {
           const slot = node.getAttribute('slot');
           if (slot) {
             this[`_${slot}Child`] = null;

packages/split-layout/test/split-layout.common.js

@@ -1,6 +1,7 @@
 import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, fixtureSync, nextFrame, nextRender, track } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
+import { html, render } from 'lit';
 
 const initialSizes = { width: 128, height: 128 };
 
@@ -462,4 +463,24 @@ describe('moving nodes between layouts', () => {
     expect(second.getAttribute('slot')).to.equal('primary');
     expect(first.getAttribute('slot')).to.equal('secondary');
   });
+
+  describe('nested Lit template', () => {
+    let root;
+
+    beforeEach(() => {
+      root = fixtureSync('<div></div>');
+    });
+
+    it('should not throw when re-rendering child element conditionally', async () => {
+      const fooTpl = html`<div>Foo</div>`;
+      const nestedTpl = (foo) => (foo ? html`${fooTpl}` : html`<div>Bar</div>`);
+      const parentTpl = (foo) => html`<vaadin-split-layout>${nestedTpl(foo)}</vaadin-split-layout>`;
+
+      render(parentTpl(true), root);
+      await nextFrame();
+
+      render(parentTpl(false), root);
+      await nextFrame();
+    });
+  });
 });