在div中预览模板的最佳方法（没有IFRAME）？

Question

我正在使用CMS系统，用户可以在其中选择多个不同的网站模板。当他们从左侧的模板列表中选择时，我希望页面的中间显示模板的预览，右侧显示属性检查器，用于操作颜色，字体大小，部分等等。点击预览中的元素会更改焦点，从而更改属性检查器。

最大的挑战是模板是由第三方设计师设计的，而CSS的设计期望没有其他CSS（比如CMS的CSS）。我可能强迫他们限制他们的设计在任何页面上工作，并且总是有一个我可以注入页面的顶级DIV。

我可以IFRAME但是这并不理想，因为DOM操作变得更加复杂。

最终，我可以完全控制模板结构及其制作方式，但我希望尽可能简化设计师。

构建这种设置的最佳方法是什么？

Answer 1

鉴于没有iframe的要求（这是正确的方法），我看到了2个解决方案：

1. 将模板放在具有特定类/ id的div中，并预处理CSS以为每个选择器添加该类。

2. 使用Shadow DOM，但您会only target Chrome。