如何将内部Vue应用程序css从网站的其他部分调整范围？

Question

我需要创建一个“插件”，其中包含一个用户界面，将显示在许多不同的供应商网站。这是一个CMS不可知论插件。我不能使用iframe的搜索引擎优化的原因。我需要隔离插件的css (可能是js)与其他网站，并阻止其他网站的css进入这个插件。我该怎么做？

更新：

好的，所以我问了一个问题，这个问题对我的设置/技术来说有点过于具体了。问题应该是:如何将html元素与其他文档样式隔离开来？这是answered here；

新问题:如何对Vue CSS进行范围调整，使其不向上传播，而是传播到子组件？

例如，我有主Vue组件，其中包括bootstrap.scss，我需要应用到所有子组件，但我不希望它泄漏到主网站。将scoped添加到样式可以向上阻止泄漏，但我希望它也适用于子类。

Answer 1

好吧，我想通了。

非常简单，真的，结合this answer来防止父->子继承。我将所有的Vue css限定为#app { /*styles*/ }，包括引导导入。例如。

<style type="text/scss" lang="scss">
    #app {
        @import '../node_modules/bootstrap/scss/bootstrap';

        // rest of vue global styles go here.
        // child components may use scoped
    }
</style>

注意:我没有在根vue组件上使用scoped属性。

Answer 2

我想这就是你要找的。在.vue文件中，您可以向模板添加样式标记，然后Vue将创建仅适用于应用程序的Shadow样式。在最终产品中，样式通过data-v属性呈现，以防止类名冲突。

https://vue-loader.vuejs.org/en/features/scoped-css.html

(复制自我的编辑答案) of/?st=J8UMA1JQ&sh=c3ebf5b1