防止嵌入式第三方CSS漏到沒有內置頁框的父頁

Question

我有一個單頁面應用程序（SPA），它需要將一些第三方HTML/CSS代碼作爲字符串加載，並將其插入頁面某處。我們完全不能控制如何編寫第三方代碼。如果CSS代碼的開發者創建了一些適用於通用元素的規則，那可能會搞亂我們的SPA風格。

例如，這樣的規則可以進來第三方的CSS代碼：

body { margin: 0; } 

而且它可以改變我們的SPA身體餘量爲0，不希望。

所以問題是：如何防止此類第三方CSS代碼「泄漏」到父元素？

要解決這個問題，我當然可以使用iframe。但我希望儘可能遠離它。

任何想法，一個乾淨的解決方案？

更新：也許Shadow DOM可以提供幫助嗎？

謝謝！

Answer 1

沒有，是除了沒有這樣的方式，從IFRAME按我的知識，以防止其他css文件到影響你的

但我建議你與你的其他開發者溝通好，並配有這不會影響解決方案的代碼以及固定的開發者問題。

反正你可以使用CSS優先覆蓋這些變化，希望它可以幫助...