Проблема с анимацией @vaadin/router

Резко встала проблема анимации переходов с использованием @vaadin/router. Когда пользователь переходит по роутам срабатывает типичный fadeOut и fadeIn, но возникают проблемы из-за позиционирования - #outlet выпадает из основного контейнера. Я так понял, что все происходит из-за того, что при инициализации перехода router устанавливает компоненту height: 0px. Но как это исправить я понятия не имею. Также отмечу, что в официальных доках работает все исправно. Если кто раньше сталкивался с этой проблемой, прошу помочь

P.S. Такая же ошибка обнаружена в Firefox Dev: устанавливает width: 0px; С высотой все в порядке

app.js

import {css, html, LitElement} from 'lit-element'
import {router_outlet} from './route'

import '@vaadin/vaadin-button'

class App extends LitElement {
static get styles() {
    return css`
      :host{ 
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
      }
      .app-content{
        position: relative;
        width: inherit;
        background: #fff;
        padding: 6px;
        border-radius: 8px;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
      }
      #outlet > .leaving {
        animation: .3s fadeOut ease;
      }
      #outlet > .entering {
        animation: .3s fadeIn ease;
      }
      @keyframes fadeOut {
        to {opacity: 0;}
      }
      @keyframes fadeIn {
        to {opacity: 1;}
      }
    `
}
render() {
    return html`
        <app-links>
            <a href="/">Home</a>
            <a href="/photo">Photo's</a>
            <a href="/news">New's</a>
        </app-links>

        <div class="app-content">
          ${router_outlet}
        </div>
    `
}
}
customElements.define('ng-app', App)

route.js

import { Router } from '@vaadin/router'


const router_outlet = document.createElement('div')
      router_outlet.setAttribute('id', 'outlet')
const Route = new Router(router_outlet)


Route.setRoutes([
{ 
    path: '/',
    animate: true,
    children: [
        {path: '', component: 'home-component', action: async () => await import('./components/home-component')},
        {path: '/photo', component: 'photo-component', action: async () => await import('./components/photo-component')},
        {path: '/news', component: 'news-component', action: async () => await import('./components/news-component')},
        {path: '(.*)', redirect: '/'}
    ]
}
])

export { router_outlet }

Код частично взят из документации vaadin: https://vaadin.github.io/vaadin-router/vaadin-router/demo/#vaadin-router-animated-transitions-demos