How to get singleton component (Aurelia 2)

Hi! I encapsulate my Aurelia 2 app in a web component (see below). MyApp component should be a singleton, and I would like to invoke one of its methods later on, thus I try to get it from the app’s container, but I end up getting a new instance that gets created.

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

export class MyWebComponent extends HTMLElement {
  connectedCallback() { ={
      component: MyApp,
      host: document.querySelector('my-web-component'),

  myMethod() {;

customElements.define('my-web-component', MyWebComponent);

Please let me know if I got something wrong. I feel that the docs don’t help a lot on that.

Please consider that I am using ESNext.


Hi @frmjp! As the MyApp is your app root, you don’t need to use the container to grab the MyApp instance.

Instead, you can do this:

import { ICustomElementController } from '@aurelia/runtime-html';

( as ICustomElementController<MyApp>)

Note that you can also explicitly register a singleton component. Refer the docs for details.