Измените CSS-стиль innerHTML для фреймов и изображений

Question

У меня есть приложение Angular 6, и я получаю запись в блоге по HTTP-вызову, и я установил одну из переменных, которая является содержимым, в innerHTML из span, в результате чего отображается содержимое блога.Там также есть изображения и фреймы, и у них есть стиль, потому что они определены в редакторе.У меня проблема в том, что CSS, который я должен переопределить, для значений iframe не применяется, и я не могу получить желаемый результат.

Я определил в свой component.scss следующее:

iframe {
width: 100% !important;
}

Этот CSS не может быть найден в списке CSS, применяемом при проверке элемента блога, отображаемого на экране.Я не уверен, что это из-за того, что я делаю после извлечения контента, или что-то, но это не просто показывает.

Любая помощь очень ценится.

ОБНОВЛЕНИЕ:Добавление кода компонента:

component.ts

@Component({
    animations: [enterScreenFromBottom],
    selector: 'app-blog-entry',
    templateUrl: 'blog-entry.component.html',
    styleUrls: ['blog-entry.component.scss']
})
export class BlogEntryComponent

...

ngOnInit() {
        this.loading = true;
        this.route.params.subscribe(p => {
            const id = p['id'];
            this.blogService.getById(id)
                            .then(b => {
                                this.blogEntry = b;
                                this.content = this.sanitizer.bypassSecurityTrustHtml(this.blogEntry.content);
                                this.loading = false;
                            })
                            .catch(e => {
                                console.log('Error getting blog entry ' + id, e);
                                this.loading = false;
                            });
        });
    }

компонент HTML:

<div [@enterScreenFromBottom]="state">
    <p [innerHTML]="content"></p>
</div>

компонентscss:

iframe {
width: 100% !important;
}