Style wont apply to angular component injected into iframe

Question

I have an iframe in which i want to append my own angular component but it i cant get any styling to be applied to the component within the iframe.

On iframe load i add the component via js:

    let component= document.getElementById('componentId');
    let divInIframe= iframeWindow.document.getElementById('divInIframeId');
    divInIframe.appendChild(component);

The components own styling doesnt get applied so i tried to add it manually to the css to the iFrames own css file. Also tried to add style via js after iframe loads::

let cssLink = document.createElement("link");
    cssLink.href = "../../assets/component.css";
    cssLink.rel = "stylesheet";
    cssLink.type = "text/css";
    iframDoc.head.appendChild(cssLink);

The styling still isnt applied to the component.

Tried ViewEncapsulation.None etc, but nothing seems to help. Only way of making it work was to use encapsulation:ViewEncapsulation.ShadowDom but that isnt supported in IE11.

Anyone got a clue how i can solve this?

Answer 1

Add the assets folder to the angular.json

"projects":{
   "AppName":{
      ...
      "assets":[
        "src/assets"
      ]
      ...
    }
 }

then use cssLink.href = "assets/component.css";

Answer 2

You can do the following:

selector: 'app-name',
templateUrl: './component_name.component.html',
styleUrls: ['./component_name.component.css']