@vaadin/router and animation with the use of LitElement

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`
					:host{ display: block}
				<h1> ... </h1>

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

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


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.