Стиль не применяется к угловому компоненту, введенному в iframe

Question

У меня есть iframe, в котором я хочу добавить свой собственный угловой компонент, но я не могу применить какой-либо стиль к компоненту внутри iframe.

При загрузке iframe я добавляю компонент через js:

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

Собственная стили компонентов не применяются, поэтому я попытался добавить ее вручную в CSS в собственный файл CSS iFrames.Также пытался добавить стиль через js после загрузки iframe ::

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

Стиль еще не применен к компоненту.

Пробовал ViewEncapsulation.None и т. Д., Но, похоже, ничего не помогает.Единственным способом заставить его работать было использование инкапсуляции: ViewEncapsulation.ShadowDom, но это не поддерживается в IE11.

Кто-нибудь получил подсказку, как я могу решить эту проблему?

Answer 1

Вы можете сделать следующее:

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