this.componentTagName = '<my-custom-component></my-custom-component>';

<div [innerHtml]="componentTagName"></div>

this.componentTagName = '<my-custom-component [someInput]="someInputVariable"></my-custom-component>';

<div #componentContainerRef>
  Component '{{componentTagName}}' is not registered in the browser's component registry yet.
</div>

customElements.whenDefined(this.componentTagName).then(() => {
  const element = this.renderer.createElement(this.componentTagName);
  this.renderer.appendChild(this.componentContainerRef.nativeElement, element);
});

customElements.whenDefined(this.componentTagName).then(() => {
  const element = this.renderer.createElement(this.componentTagName);
  this.renderer.setProperty(element, 'someInput', this.componentInput);
  this.renderer.appendChild(this.componentContainerRef.nativeElement, element);
});

customElements.whenDefined(this.componentTagName).then(() => {
  const element = this.renderer.createElement(this.componentTagName);
  this.renderer.setProperty(element, 'someInput', this.componentInput);
  this.renderer.listen(
    element,
    'customComponentEvent',
     event => this.onEventReceivedFromComponent
  );
  this.renderer.appendChild(this.componentContainerRef.nativeElement, element);
});
onEventReceivedFromComponent(event: CustomEvent) {
  console.info(`${this.componentTagName} received event: `, event);
}

this.renderer.listen(
  element,
  'customComponentEvent',
  event => this.onEventReceivedFromComponent.apply(this, [event])
);

// Angular Elements component
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
const tagName = 'my-custom-component';
@Component({
  selector: tagName,
  templateUrl: '<input [(ngModel)]="messageText" type="text"><button (click)="onSendMessageClick()">Send message</button>'
})
export class ExternalWidgetComponent implements OnInit {
  @Input('messageReceiver') messageReceiver: EventEmitter<any>;
  @Output('customComponentMessage') messageSender = new EventEmitter<any>();
  static readonly tagName = tagName;
  messageText: string = '';
  constructor() {
  }
  ngOnInit(): void {
    if (this.messageReceiver) {
      this.messageReceiver.subscribe(this.onMessageReceived);
    }
  }
  onSendMessageClick(): void {
    this.messageSender.emit({text: this.messageText});
  }
  onMessageReceived(message) {
    console.log(`${tagName} received the message: `, message);
  }
}
// Wrapper component
import { Component, ElementRef, EventEmitter, Input, Renderer2, ViewChild } from '@angular/core';
import { EventBusService } from '../event-bus.service';
@Component({
  selector: 'web-component-wrapper',
  template: `<div #componentContainerRef>Component '{{componentTagName}}' is not registered in the browser's component registry yet.</div>`
})
export class WebComponentWrapperComponent {
  @ViewChild('componentContainerRef') componentContainerRef: ElementRef;
  componentTagName = '';
  messageSender: EventEmitter<any> = new EventEmitter<any>();
  // message name for the event bus
  private messageType = 'customComponentMessage';
  constructor(private renderer: Renderer2, private eventBus: EventBusService) {
  }
  renderComponentWhenDefined() {
    customElements.whenDefined(this.componentTagName).then(() => {
      const element = this.renderer.createElement(this.componentTagName);
      this.renderer.setProperty(element, 'messageReceiver', this.messageSender);
      this.renderer.listen(
        element,
        'customComponentEvent',
        event => this.onEventReceivedFromComponent.apply(this, [event])
      );
      this.renderer.appendChild(this.componentContainerRef.nativeElement, element);
    });
    // re-route messages from the event bus to the web-component
    this.eventBus
      .observe(this.messageType)
      .subscribe(this.sendMessageToComponent(message));
  }
  set componentName(value: string) {
    this.componentTagName = value;
    this.renderComponentWhenDefined();
  }
  // re-route messages from the component to the event bus
  onMessageReceivedFromComponent(message: CustomEvent) {
    this.eventBus.publish(this.messageType, message.detail);
  }
  sendMessageToComponent(message: any) {
    this.messageSender.emit(message);
  }
}