html - 防止 jinja2 include 继承 css

Question

我有一个通过 jinja2/flask 呈现的简单 HTML 页面 (main.html)。

main.html

{% extends 'layout.html' %}

{% include 'content1.html' %}
{% include 'widget1.html' %}
{% include 'widget2.html' %}

layout.html 包含所有页面的一些 CSS( Bootstrap )、JS 和一些 HTML(标题/菜单)。

我希望非常简单地在此 html 页面中包含一些内容模板和一些“小部件”。小部件更加复杂，因为它们包含自己的 JS 和 CSS( Bootstrap )...这会造成麻烦，因为 widget1.html 中的 CSS 会覆盖 main.html 的 CSS(考虑到包含，这并不意外)。

是否有某种方法可以“包含”widget1.html，而无需实际将 CSS/JS 返回到父页面(main.html)？

我不想重构 widget1.html，因为它是一个外部应用程序。这里有一个简单的解决方案吗？

提前致谢!

Answer 1

查看这个答案:How To Isolate a div from public CSS styles?

您可以创建一个包装类 .isolate，并按如下方式使用它:

p {
  color: blue;
}

.isolate * {
  all: unset;
}

.example {
  border: 1px solid;
  padding: 1em;
}

<p>By default all text is blue.</p>
<div class="isolate example">
  <p>Within the "isolate" div, that CSS is removed</p>
</div>
<p>Outside of the div, default rules apply once again.</p>