fix: add renderItem test, fix renderItem teardown

cosmoz-data-nav.js

@@ -350,7 +350,11 @@ class CosmozDataNav extends hauntedPolymer('haunted', useDataNav)(mixinBehaviors
 
 		this.splice('_elements', 0, this._elements.length, this._createElement())
 			.forEach(element => {
-				this._removeInstance(element.__instance);
+				if (this.renderItem) {
+					element.removeChild(element.__instance);
+				} else {
+					this._removeInstance(element.__instance);
+				}
 				element.removeChild(element.__incomplete);
 				element.__instance = element.__incomplete = null;
 			});

test/basic.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import {
 	assert, fixture, html, oneEvent, waitUntil
 } from '@open-wc/testing';
@@ -400,3 +401,31 @@ suite('renderQueue', () => {
 		});
 	});
 });
+
+suite('renderItem', () => {
+	let nav,
+		itemsRendered = 0;
+	const renderItem = (item, index) => {
+		itemsRendered += 1;
+		return html`
+			<cosmoz-data-nav-test-view class="fit layout vertical" item="${ item }" index="${ index }">
+			</cosmoz-data-nav-test-view>
+		`;
+	};
+
+	suiteSetup(async () => {
+		[, nav] = await Promise.all([
+			fixture(visibilityFixture),
+			setupFixture(html`
+				<cosmoz-data-nav .renderItem="${ renderItem }">
+				</cosmoz-data-nav>
+			`)
+		]);
+	});
+
+	test('renders items', async () => {
+		nav.items = [{ id: '0' }, { id: '1' }, { id: '2' }];
+		flushRenderQueue(nav);
+		assert.equal(itemsRendered, nav.items.map(nav.isIncompleteFn).filter(i => !i).length);
+	});
+});