fix: cleanup slot attribute on removed nodes (#3396)

vaadin · Feb 4, 2022 · 7661fa0 · 7661fa0
1 parent 551e79d
commit 7661fa0
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/packages/split-layout/src/vaadin-split-layout.js b/packages/split-layout/src/vaadin-split-layout.js
@@ -236,14 +236,24 @@ class SplitLayout extends ElementMixin(ThemableMixin(PolymerElement)) {
   /** @protected */
   ready() {
     super.ready();
-    this.__observer = new FlattenedNodesObserver(this, this._processChildren);
+    this.__observer = new FlattenedNodesObserver(this, (info) => {
+      this._cleanupNodes(info.removedNodes);
+      this._processChildren();
+    });
 
     const splitter = this.$.splitter;
     addListener(splitter, 'track', this._onHandleTrack.bind(this));
     addListener(splitter, 'down', this._setPointerEventsNone.bind(this));
     addListener(splitter, 'up', this._restorePointerEvents.bind(this));
   }
 
+  /** @private */
+  _cleanupNodes(nodes) {
+    nodes.forEach((node) => {
+      node.removeAttribute('slot');
+    });
+  }
+
   /** @private */
   _processChildren() {
     [...this.children].forEach((child, i) => {

diff --git a/packages/split-layout/test/split-layout.test.js b/packages/split-layout/test/split-layout.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { aTimeout, fixtureSync, track } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextFrame, track } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../vaadin-split-layout.js';
 
@@ -322,3 +322,23 @@ describe('layout with one child', () => {
     expect(downAndUp).to.not.throw(Error);
   });
 });
+
+describe('removing nodes', () => {
+  beforeEach(async () => {
+    splitLayout = fixtureSync(`
+      <vaadin-split-layout>
+        <div id="first">some content</div>
+        <div id="second">some content</div>
+      </vaadin-split-layout>
+    `);
+    await aTimeout(0);
+    first = splitLayout.$.primary.assignedNodes({ flatten: true })[0];
+    second = splitLayout.$.secondary.assignedNodes({ flatten: true })[0];
+  });
+
+  it('should remove slot attribute from the removed node', async () => {
+    splitLayout.removeChild(first);
+    await nextFrame();
+    expect(first.hasAttribute('slot')).to.be.false;
+  });
+});