Как содержать стили, внедренные с innerHTML в элемент DOM и его дочерние элементы? - PullRequest
Новая
       9

Как содержать стили, внедренные с innerHTML в элемент DOM и его дочерние элементы?

0 голосов
/ 18 мая 2018

У меня есть одна HTML-страница, которую я получаю от третьей стороны.

Проблема в том, что HTML поставляется с CSS внутри тега style.Этот CSS является своего рода общим, когда они добавляют свой собственный шрифт и собственный размер шрифта для тела.

Я использую dom sanitizer с bypassSecurityTrustHtml для отображения HTML в моем приложении. 

this.domSanitizer.bypassSecurityTrustHtml(htmldata);

Сейчаспосле добавления нового HTML стиль моего приложения из-за этого меняется.Как можно избежать этого, кроме добавления стороннего URL в iframe?

1 Ответ

0 голосов
/ 18 мая 2018

Вы ищете ViewEncapsulation.Native.Вам нужно будет создать пользовательский компонент, который имеет только тот элемент DOM, в который вы вставляете innerHTML.

То, что установка этого ViewEncapsulation в Native означает, что он создает Shadow DOM и гарантирует, что он станет родительским элементом ивсе ссылки на стили и DOM содержатся внутри себя.

Пример установки ViewEncapsulation на Native.Вы можете указать свой DOM и innerHTML-инъекцию здесь: 

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
   styles: [
    `h1 {
      color: #367;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 250%;
    }
  `],
   encapsulation: ViewEncapsulation.Native
})
export class MyComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}
...