Packaging app in a web component

vNext
1

Just doing some experimenting and trying to package an aurelia app in a web component.

e.g.

import Aurelia from 'aurelia'
import { MyApp } from './my-app'

export default class MyWebComponentApp extends HTMLElement {
  constructor() {
    super()

    this.attachShadow({ mode: 'open' })

    this.shadowRoot!.innerHTML = '<my-app></my-app>'
  }

  async connectedCallback() {
    const host = this.shadowRoot!.querySelector('my-app') as HTMLElement

    Aurelia
      .app({ host: host, component: MyApp })
      .start()
  }
}

customElements.define('my-web-component-app', MyWebComponentApp)

Seems to be working, but aurelia adds stylesheets to the head tag of the page, rather than to the shadow root. Anyay to overcome this?

image
image1646×1174 113 KB

Here is a repo to test it out: GitHub - ivanbacher/root-web-component