防止远程站点HTML受CSS影响

Question

我有一个应用程序，我允许用户在他们的网站上添加一段代码，然后在网站上添加一个小部件，允许他们的用户与应用程序等进行交互。

我现在正在做的是将我的所有html放在他们放置在网站上的容器中（希望是）一个唯一的ID。让我们说ts-container。然后，在加载到用于设置元素样式的网站上的css中，我将＃ts-container放在样式表中的每个选择器前面。这是保护我的CSS不受影响其页面元素的最佳且唯一的方法，还是有一些方法可以包装整个样式表而无需实际识别每个类？有没有办法将样式表放在包装容器中，让它只影响那些元素或什么？我应该在iframe或类似的东西中这样做吗？

只是寻找一些建议，以防我错过了我的最佳实践。

Answer 1

您可以对CSS进行子重置：

#ts-container * {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: normal;
    background-color: white;
    color: black;
}

您可能需要输入一些额外的样式，但这样可以防止父文档中的任何CSS影响您的窗口小部件。

不过，

iframe是一种更容易实现的方法。无论您是否使用它们都是一种设计选择。