diff --git a/packages/split-layout/src/vaadin-split-layout.js b/packages/split-layout/src/vaadin-split-layout.js index b74a325de4..c6877c45fb 100644 --- a/packages/split-layout/src/vaadin-split-layout.js +++ b/packages/split-layout/src/vaadin-split-layout.js @@ -236,7 +236,10 @@ 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)); @@ -244,6 +247,13 @@ class SplitLayout extends ElementMixin(ThemableMixin(PolymerElement)) { 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 index 2765b989b6..57c39928e9 100644 --- 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(` + +
some content
+
some content
+
+ `); + 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; + }); +});