css - 无法将 css 应用于 iframe(标签本身)

Question

我有一个内容编辑器，使用该编辑器我希望用户能够保存指向外部域的链接并将其显示为 iframe。

iframe 出现了，但是当我尝试将 CSS 规则应用于 iframe 时(不是 iframe 内的内容，标签本身)，无论我做什么它都不起作用，规则甚至没有出现在开发者控制台中。我在同一张工作表中有更多规则，它们工作得很好。

目前我有以下CSS:

iframe, .ql-video {
  height: 500px !important;
  width: 300px !important;
}

这是我正在测试的 iframe:

<iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/GKqEoSiAi90?showinfo=0" data-ss1531946992="1" data-ss1531947568="1"></iframe>

但是 css 根本不影响它。它没有被禁用或覆盖，只是根本不显示。

如果我将规则添加到 element.style 它会按我想要的方式工作，但是我需要规则在加载 iframe 时存在。不幸的是，我无法将它设置为内联样式，因为 iframe(以及其余内容)是作为字符串从数据库中检索的。

这就是我检索内容(iframe 是其中的一部分)的方式:

this.contentService.getSpecificArticle(this.route.snapshot.queryParams["newsid"]).subscribe( news => {
  document.getElementById('main_content').innerHTML = (news as any).content;
  ...
});

我这样做是因为编辑器将内容保存为纯html。

那么知道为什么我不能用这种方式设置 iframe 标签的样式吗？

编辑:我也尝试过对内容进行插值，但是 Angular 然后清除了 iframe 以及属性绑定(bind)，但随后内容显示为字符串。这就是我使用 .innerHTML 的原因，但我确实怀疑可能是因为这个原因，尽管我不确定为什么会这样，或者我如何解决它。

Answer 1

如果您的 CSS 来自 CSS 模块，它不会将样式应用于嵌套组件。 (这是 CSS 模块的一个重要特性)。

尝试在 iframe 的 CSS 前面添加 /deep/(虽然 /deep/ 已被弃用，但您应该使用 ::ng -deep 而不是现在)

/deep/ .ql-video {
  height: 500px !important;
  width: 300px !important;
}

(此外，您不应该完全使用 /deep/，您应该为该特定组件制作 CSS 并将其应用到那里。)

这里有一些关于 Angular 的组件样式和“深度”的信息:https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep