在未知站点中嵌入窗口小部件时如何保护样式？

Question

假设我们建立了一个新闻网站SupaNews，我们希望允许人们在他们的网站中嵌入新闻流。

首先想到的是，每个CSS规则都应以唯一的前缀supanews

作为前缀。

<div class="supanews">
  <ul class="supanews-list">
    <li class="supanews-item">Zerg found on Tarsonis!</li>
    <li class="supanews-item">Protoss mothersip noticed in Koprulu sector</li>
  </ul>
<div>

但是，Elements仍然从主站点继承样式，这会破坏标记。有什么办法可以防止这种情况？也许会在reset.css部分应用一些特殊的重磅符号.supanews？

此外，我想知道是否有可能避免在每个CSS规则中添加前缀，并以某种方式告诉浏览器.supanews内的所有内容都属于范围？ HTML看起来像下面的代码，浏览器应该知道.list内部的.supanews不应从外部HTML继承与.list相同的规则：

<div class="supanews">
  <ul class="list">
    <li class="item">Zerg found on Tarsonis!</li>
    <li class="item">Protoss mothersip noticed in Koprulu sector</li>
  </ul>
<div>

也可以使用iframe，它可以提供完美的隔离，但是我想探索其他方法。如果仅在97％的网站中都能使用，那是可以的。