Looking for angular solution to angularJs algorithm with $compile

Question

I have an angularJs application that I am migrating to angular (using ngUpgrade), and it ha a kind of plugin type architecture, where additional "3rd party" angularjs modules can be added to the core app.

One of the key features of app, does a kind of "dom decorator" operation, that basically works like this:

There is a root component on the page that lives in the core app, lets call it root

  <root>
    some content
  </root>

Through configuration, someone will add additional angulajs modules, which lets say contain 2 unknown component directive called dec-a and dec-b

(These components will follows a strict transclude contract)

So the root component will update its template to look like this:

<root>
  <dec-a>
    <dec-b>
      some content
    </dec-b>
  </dec-a>
</root>

Then it will update the template using $compile.

So basically the requirement is that I need to update the template to add "unknown" components dynamically (they will be known to angular, just not to the root component)

I did manage to get something working... ish using angular elements, by converting the plugin components to web components, but I really didn't like this approach, its a lot more verbose, and im not sure about the performance if I have a page with 50 of these root components on them,a nd 5-10 decorated directives on each one.

TIA! /Brian