Web-components we no app root

I would like to use Aurelia 2 to develop two web-components that I can use on a third party site.

In main.ts

...
import { ComponentOne } from './resources/components/component-one'
import { ComponentTwo } from './resources/components/component-two'
...
Aurelia
  .register(AppTask.creating(IWcElementRegistry, registry => {
    registry.define('component-one', ComponentOne)
    registry.define('component-two', ComponentTwo)
  }))
  .app(class App {})
  .start()

Now when I import the created bundle into the third party site. I just need to add this in the html

<component-one></component-one>
<component-two></component-two>

To get them to render.

From some initial testing it seems to work. However, there is one error in the webdev console:

app-root.ts:96 Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')

I am guessing this is just do to the fact that the app root does not have a actual HTML element.

Will this cause issues in the future? Does this approach even make sense?

2 Likes

Are you able to create a small repro for this issue?