Possible to destroy custom elements fully so that services are fully destroyed when it was removed from DOM?

[celestale]

How can I know if custom-component gets removed from DOM so that I can actually destroy services (OnDestroy lifecycle) that was injected to root module?

I see that services that are injected in root do not get destroyed when custom-component gets removed from the DOM as a WebComponent.

ngDoBootstrap(appRef: ApplicationRef, platformRef: PlatformRef) {
        if (environment.build=== 'custom') {
            if (!customElements.get('custom-component')) {
                customElements.define('custom-component', createCustomElement(AppComponent, { injector: this.injector }));
        }
}