如何从网站的其余部分确定内部 Vue 应用程序 css 的范围？

Question

我需要创建一个包含用户界面的“插件”，该界面将显示在许多不同的供应商网站上。这是一个 CMS 不可知的插件。出于 SEO 的原因，我不能使用 iframe。我需要将插件的 css（可能还有 js）与网站的其余部分隔离，并阻止网站的其余 css 访问此插件。我怎样才能做到这一点？

更新：

好的，所以我问了一个对我的设置/技术有点过于具体的问题。问题应该是：如何将 html 元素与文档样式的其余部分隔离？这是在这里回答;

新问题：如何确定 Vue CSS 的范围，使其不向上传播，而是传播到子组件？

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

Answer 1

好的，我已经想通了。

真的很简单，结合这个答案来防止父 -> 子继承。我将所有 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>

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