如何在动态加载的组件中隔离CSS

Question

我的图书馆较少，有多个版本。 我有使用该库V1的主页。 在这一点上，页面的组件使用此库的V2。 我的问题是，加载使用V2的组件时，样式将应用于整个页面。 不幸的是，该库不向后兼容，因此破坏了整个页面：|。

是否可以通过某种方式将内部组件与页面的其余部分隔离？

CSS页面：

谢谢！

Answer 1

您可以在Inner Page容器上放置一个唯一的标识符（id或class），然后从该容器在您的V2 CSS中进行级联以仅影响其内容。

#inner-page input { width: 100%; }
#inner-page p { margin-bottom: 20px; }

Or LESS eg:

#inner-page { 
    input {
        width: 100%;
    }
    p { 
        margin-bottom: 20px;
    }
}

这将影响具有唯一ID的容器中的内容，无论它是否是动态的。