Twitter bootstrap 瓦丁+；聚合物组件渲染不正确

首先，我对前端技术一点也不满意。我正在尝试基于聚合物模板制作一个Vaadin视图。问题是结果并不是我所期望的。当我预览没有Vaadin和Polymer（经典HTML+CSS）的页面时，结果如下：

但当我使用聚合物时，当我使用Vaadin时，我得到了这个结果：

我怀疑我可能在导入CSS的方式上犯了一些错误。这是我的聚合物代码：

从'@polymer/polymer/polymer element.js'导入{html，polymererelation}；
类NotFoundView扩展了聚合关系{
静态获取模板（）{
返回html`
@导入url（“https://fonts.googleapis.com/css?family=Nunito+Sans”）；
：根{
--蓝色：#0e0620；
--白色：#fff；
--绿色：#2ccf6d；
}
html，
身体{
身高：100%；
}
身体{
显示器：flex；
对齐项目：居中；
证明内容：中心；
字体系列：“Nunito Sans”；
颜色：var（--蓝色）；
字号：1em；
}
钮扣{
字体系列：“Nunito Sans”；
}
h1{
字体大小：7.5em；
利润率：15px 0px；
字体大小：粗体；
}
氢{
字体大小：粗体；
}
.btn{
z指数：1；
溢出：隐藏；
位置：相对位置；
填充：8px 50px；
边界半径：30px；
光标：指针；
字号：1em；
字母间距：2px；
过渡：0.2秒；
字体大小：粗体；
利润率：5px0px；
}
@媒体屏幕和屏幕（最大宽度：768px）{
身体{
显示：块；
}
边缘底部：70像素；
.集装箱{
利润上限：70像素；
}
}
404
哦，你迷路了。
您要查找的页面不存在。
你是怎么来到这里的是个谜。但是你可以点击下面的按钮
返回主页。

家
`;
}
静态get是（）{
返回“未找到视图”；
}
静态获取属性（）{
返回{
//在这里申报你的财产。
};
}
}
定义（NotFoundView.is，NotFoundView）；

Polymer使用阴影根，这意味着元素中的CSS被封装为仅应用于该元素的内容。特别是，这意味着永远不会应用针对

html

和

body

的样式，因为这些元素不在此元素内

在某种程度上，您可以通过将CSS改为使用

：host

选择器来解决此问题，但我无法猜测这是否足以满足所有情况（尤其是媒体查询）。

：host

选择器应用于阴影根附加到的元素，即

未找到视图

元素本身

---

或者，您可以将全局CSS提取到单独的文件中，该文件作为常规CSS加载，而不是加载到元素的阴影根中。

Polymer使用阴影根，这意味着元素中的CSS被封装为仅应用于该元素的内容。特别是，这意味着永远不会应用针对

html

和

body

的样式，因为这些元素不在此元素内

在某种程度上，您可以通过将CSS改为使用

：host

选择器来解决此问题，但我无法猜测这是否足以满足所有情况（尤其是媒体查询）。

：host

选择器应用于阴影根附加到的元素，即

未找到视图

元素本身

---

或者，您可以将全局CSS提取到一个单独的文件中，该文件作为常规CSS加载，而不是在元素的阴影根中加载。

您的回答帮助我了解了其中的情况。我仍然对如何让媒体查询工作感到困惑。如果我在Vaadin中使用

@CssImport

导入它，那么它将成为全局的，并且可能会造成混乱。如果我使用注释的

themeFor

属性，那么这与上面的代码不是一回事吗？

themeFor

主要是为了让CSS进入可重用组件（例如任何内置的

vaadin某物

组件）的影子根目录中您不能简单地修改组件本身的源。您的媒体查询问题很可能与影子根没有直接关系，而是典型的单页应用程序结构，在这种结构中，即使加载了应用程序的其他部分，应用程序某个部分的全局CSS也会保持加载状态。处理这个问题的一个典型方法是，根据正在使用的部件切换body元素的类名，然后编写依赖于该类名的CSS。您的回答帮助我了解了其中的情况。我仍然对如何让媒体查询工作感到困惑。如果我把它导入wi