时间戳

首页 > 解决方案 > 如何禁用所有可能影响我在另一个网站上的小部件的 CSS？

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

问题描述

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

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

例如，

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

.myWidget { background-color: red; }

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

div { border: 5px solid green; }

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

谢谢

标签： javascriptcsswidget

解决方案

你可能正在使用 shadow DOM

Shadow DOM MDN 网络文档

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

推荐阅读