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

我在一个CMS系统上工作，在这个系统中，用户可以为他们的站点选择不同的模板。当他们从左边的模板列表中选择时，我希望页面中间显示模板的预览，右边显示属性检查器，用于处理颜色、字体大小、部分等。单击预览中的元素会更改焦点，从而更改属性检查器

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

我可以对它进行框架化，但这并不理想，因为DOM操作变得更加复杂

最终，我可以完全控制模板结构和它们的制作方式，但我希望对设计师来说，它尽可能简单

---

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

鉴于无iframe的要求（这是正确的方式），我看到了两种解决方案：

将模板放在具有特定类/id的div中，并预处理CSS，以在每个选择器前面加上该类的前缀

用这个，但是你会的

---

那可能行得通。阴影DOM看起来也会有更多的开销。在一个DIV中，他们不必在主体或主包装DIV上应用任何CSS。我必须有一些默认值，并强制他们使用它。可能没有边距，两边都有填充。