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

Question

我需要创建一个“插件”，其中包含一个将显示在许多不同 vendor 网站上的用户界面。这是一个与 CMS 无关的插件。出于 SEO 原因，我不能使用 iframe。我需要将插件的 css(可能还有 js)与网站的其余部分隔离开来，并阻止网站的其余 css 访问此插件。我该怎么做？

更新:

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

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

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

Answer 1

好的，我已经弄清楚了。

结合this answer 真的很简单防止父->子继承。我将所有 Vue css 的范围限定在 #app {/*styles*/} 中，包括 Bootstrap 导入。例如

<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 属性。