如何禁用所有可能影响我在另一个网站上的小部件的 CSS？

Question

我正在构建 JavaScript 应该添加到其他人网站上的小部件。

我通过动态添加 CSS 到它们所在的页面来设置我的小部件的样式。

例如，

下面我的 CSS 代码适用于我的小部件内的 DIV：

.myWidget { background-color: red; }

但是远程页面上我自己之外的 CSS 文件可能有：

div { border: 5px solid green; }

上面的 CSS 也适用于我的小部件。如何禁用我自己之外的所有其他 CSS？

谢谢

Answer 1

您可能正在使用阴影 DOM

Shadow DOM MDN Web Docs

Web 组件的一个重要方面是封装 — 能够将标记结构、样式和行为隐藏起来并与页面上的其他代码分开，这样不同的部分就不会冲突，并且代码可以保持良好和干净。 Shadow DOM API 是其中的关键部分，它提供了一种将隐藏的分隔 DOM 附加到元素的方法。

Answer 2

您可以使用 all shorthand property and the unset keyword 将每个 属性 的值设置为其初始值。

.myWidget {
  all:unset;
  background-color: red;
}

div {
  background-color:yellow;
}

<div class="myWidget">Hello World!</div>