Search code examples
angularweb-componentlit-elementlit

Is it possible to use an angular component in a slot of a webcomponent

In my angular app (Angular v12 or latest), I'm using a custom library of webcomponents.

One of this is a modal, with a slot (something like this : https://www.npmjs.com/package/@obsidiansoft/native-modal )

(Sorry, I'm not authorized to link the code.)

I'm trying to display an angular component in my modal, but when inspecting the modal DOM, I have something like :

<modal>
  <app-my-custom-component></app-my-custom-component>
</modal>

Angular is not rendering the html behing "app-my-custom-component" in the modal.

The modal is working properly when the content is pure HTML :

<modal>
  <p>A basic content</p>
</modal>

render correctly in the browser.

Is this usage possible ? What Angular configuration do I need ?

Solution

  • lit-elements returns Shadow DOM elements, which will not be directly accessible. So even if you try to insert an Angular Component in Lit-Element Component, than your Angular App will not be able to react to the Shadow DOM and the custom-element(angular element/component) you have added.

    And yes from the performance and architectural perspective, this doesn't seems to be a good idea.