通过innerHTML输入时span不应用css样式

Question

我有 Angular 应用程序，作为它的一部分，我在 div 中显示查询结果（具有 JSONContainer 的 ID）。

我想突出显示结果中的特定查询，因此我使用了一个管道来搜索结果，并将文本中的 FIELD:VALUE 替换为：

<span class="highlightSpan">FIELD:VALUE</span>.

我将以下 css 添加到组件中：

div#JSONContainer span.highlightSpan{
    background-color: rgba(28, 243, 28, 0.5) !important;
    color:red !important;
    padding: 1px;
    margin:1px;
}

我尝试在 .highlightSpan 下添加相同的样式，得到相同的结果。

我使用存储整个 JSON 的“data”变量和存储查询的“query”变量，通过 insideHTML 插入此范围和其余文本：

    <div class="col-xs-12" id="JSONContainer"
        [innerHTML]="data | textHighlight:query">
    </div>

（我没有使用字符串插值，因为数据变量是 json 形状，我使用 html 代码对其进行样式设置，例如 html br 标记，并且字符串插值仅显示文本）。

当我将鼠标指向谷歌开发工具中的相关跨度时，我看到带有该类的跨度已创建：

但 css 样式没有应用，甚至没有显示在 google 开发工具中：

编辑：我知道它没有显示（我从 img 中删除了它），但跨度位于 div#JSONContainr 中，如所述。

编辑2：这是相关的树：

为什么会发生这种情况？

如何让css样式生效？

谢谢！

Answer 1

发生这种情况是因为您span动态添加元素并且它不是组件的一部分，因此该span元素没有使用组件样式隔离进行装饰。当您探索渲染 html 的组件时，您会看到每个元素都有类似的属性，_ngcontent-c2但您的 span 没有，因此它不是该组件样式的一部分。

您可以将 css 更改为：

::ng-deep div#JSONContainer span.highlightSpan

为组件的后代（动态添加的其他组件或元素）设置样式。或者，您可以将样式添加到全局样式中，这样它就不是该组件隔离的一部分。

我创建了stackblitz 演示来模拟您的情况。

您可以阅读有关角度视图封装的更多信息。