Accepted answer

You are right, the rewriting of the styles and addition of the attributes is to simulate style encapsulation similar to shadow DOM.

Angular doesn't add these attributes to HTML that is added dynamically.

As workaround this should work:

:host >>> .host-root {
  color: purple;
:host >>> .circlemy {
  fill: blue;

This way the selector is treated like to everything within <root> (template or children) that matches .host-root the styles will be applied.

Related Query