@vaadin/router and animation with the use of LitElement

Flow
1

When I use LitElement @vaadin/router animates pages and sets the component height or width to 0px. This problem does not occur when using HTMLElement or PolymerElement

How can I fix this problem?

	import {html, LitElement} from 'lit-element'

	class ... extends LitElement {
		render() {
			return html`
				<style> 
					:host{ display: block}
				</style>
				<h1> ... </h1>
			`
		}
	}

	customElements.define('...-component', ...)

	const router = new Router(outlet);
	router.setRoutes([{
		path: '/',
		animate: true,
		children: [
			{path: '', component: 'home-component'},
			{path: '/image', component: 'image-component'},
			{path: '/user', component: 'user-component'}
		]
	}]);
2

So this may be a little late, but I think I can answer your question.

I think this router determines the height and width based on the initial dimensions, immediately after connecting the component to the DOM. I think some component libraries do the rendering asynchronously which means the component will briefly have no height or width while executing.

I ran into the same issue as you did with a different component library and was able to force it to work, by forcing an initial render during the connectedCallback. I don’t know if you can properly do this with LitElement, but this should at least confirm the root cause.