Browser thinks web component is already defined

Question

I'm trying figure out if there's a way to register an Angular component as a web component and pass it into an iframe's srcdoc property. I'm using angular/elements in a somewhat unorthodox way in an attempt to achieve this but am getting the following error in my console

Failed to execute 'define' on 'CustomElementRegistry': the name "demo-component-c" has already been used with this registry

The problem is this happens no matter what I change the element's name to. Here's what I'm doing in my code

export class ResponsiveWindow {

    @Input() Demonstration! : Type<Component>; //I pass in a regular Angular component from the parent

    constructor( private injector: Injector ){}

    iFrameOnLoad = ()=>{  //the function I pass into the iframe's onload attribute

        const item = createCustomElement(this.Demonstration, {injector: this.injector});
    
        return customElements.get('demo-compomnent-c') || customElements.define('demo-component-c', item);
    }
}

Then in my template I do this

<iframe
    #domFrame
    sandbox="allow-scripts allow-same-origin"
    srcdoc="<demo-component-c></demo-component-c>"
    class="domFrame"
    [attr.onload]="iFrameOnLoad()"
></iframe>

When I look in the inspector I can see <demo-component-c></demo-component-c> in the iframe's body element but nothing shows up in the iframe on my screen. The only thing I could think of to try is changing the name of the component. The component I'm currently passing in is just a blank component I generated in the CLI so there's no functionality or markup aside from the myComponent works! that comes out of the box when you generate it so there's nothing to show in terms of the code with that. I'm really going out on a limb with this idea so I don't know if it's even supposed to work or not. Does anybody have any suggestions?