fix(elements): fix binding issue

Fix binding issue when using element in a parent Angular application.
Binding issue occured due to a race condition between browser parsing
and executing script and Angular trying to create the view from the template.

projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts

@@ -66,6 +66,7 @@ export class LazyElementDynamicDirective implements OnInit {
 
     this.elementsLoaderService
       .loadElement(this.url, this.tag, this.isModule, elementConfig?.hooks)
+      .then(() => customElements.whenDefined(this.tag))
       .then(() => {
         this.vcr.clear();
         const originalCreateElement = this.renderer.createElement;

projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.spec.ts

@@ -80,6 +80,7 @@ describe('LazyElementDirective', () => {
   let testHostComponent: TestHostComponent;
   let fixture: ComponentFixture<TestHostComponent>;
   let appendChildSpy: jasmine.Spy;
+  let whenDefinedSpy: jasmine.Spy;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -104,6 +105,9 @@ describe('LazyElementDirective', () => {
     fixture = TestBed.createComponent(TestHostComponent);
     testHostComponent = fixture.componentInstance;
     appendChildSpy = spyOn(document.body, 'appendChild').and.stub();
+    whenDefinedSpy = spyOn(customElements, 'whenDefined').and.returnValue(
+      Promise.resolve()
+    );
     fixture.detectChanges();
   });
 

projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts

@@ -53,6 +53,7 @@ export class LazyElementDirective implements OnInit {
     }
     this.elementsLoaderService
       .loadElement(this.url, elementTag, this.isModule, elementConfig?.hooks)
+      .then(() => customElements.whenDefined(elementTag))
       .then(() => {
         this.vcr.clear();
         this.vcr.createEmbeddedView(this.template);