twitter-bootstrap - Vaadin + 聚合物组件无法正确渲染
问题描述
首先,我对前端技术一点都不满意。我正在尝试基于聚合物模板制作 Vaadin 视图。问题是结果不是我所期望的。当我在没有 Vaadin 和 Polymer (Classic HTML + CSS) 的情况下预览页面时,结果是这样的:
但是当使用 Polymer 时,当我与 Vaadin 一起走这条路时,我得到了这个:
我怀疑我在导入 CSS 的方式上可能犯了一些错误。这是我的聚合物代码:
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
class NotFoundView extends PolymerElement {
static get template() {
return html`
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<style>
@import url("https://fonts.googleapis.com/css?family=Nunito+Sans");
:root {
--blue: #0e0620;
--white: #fff;
--green: #2ccf6d;
}
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
font-family: "Nunito Sans";
color: var(--blue);
font-size: 1em;
}
button {
font-family: "Nunito Sans";
}
h1 {
font-size: 7.5em;
margin: 15px 0px;
font-weight: bold;
}
h2 {
font-weight: bold;
}
.btn {
z-index: 1;
overflow: hidden;
position: relative;
padding: 8px 50px;
border-radius: 30px;
cursor: pointer;
font-size: 1em;
letter-spacing: 2px;
transition: 0.2s ease;
font-weight: bold;
margin: 5px 0px;
}
@media screen and (max-width: 768px) {
body {
display: block;
}
margin-bottom: 70px;
.container {
margin-top: 70px;
}
}
</style>
<div class="container">
<div class="row">
<div class="col-md-6 align-self-center">
<img src="/images/ancient.jpg" style="max-width: 80%; max-height: 80%; "alt="Ancient" />
</div>
<div class="col-md-6 align-self-center">
<h1>404</h1>
<h2>UH OH! You're lost.</h2>
<p>The page you are looking for does not exist.
How you got here is a mystery. But you can click the button below
to go back to the homepage.
</p>
<button type="button" class="btn btn-primary">HOME</button>
</div>
</div>
</div>
`;
}
static get is() {
return 'not-found-view';
}
static get properties() {
return {
// Declare your properties here.
};
}
}
customElements.define(NotFoundView.is, NotFoundView);
解决方案
Polymer 使用阴影根,这意味着元素内部的 CSS 被封装为仅适用于该元素的内容。特别是,这意味着样式针对html
并且body
永远不会应用,因为这些元素不在此元素内。
您可以在某种程度上通过更改 CSS 以使用:host
选择器来解决此问题,但我无法猜测这是否足以满足所有情况(尤其是媒体查询)。选择:host
器适用于影子根附加到的元素,即not-found-view
元素本身。
作为替代方案,您可以将全局 CSS 提取到一个单独的文件中,该文件作为常规 CSS 加载,而不是在元素的影子根中加载。
推荐阅读
- angularjs - 模型在子指令中更改,在模板中有效,而不是在父指令中具有两种绑定的链接函数
- node.js - 在 MEAN 中按 ID 显示图像
- ruby - 通过访问传入块的上下文来评估代码
- spring-mvc - Spring4 表单验证
- javascript - Fetch 和 Axios 的区别
- javascript - 为什么我的“mousemove”事件监听器只能通过匿名函数连续触发?
- python - “没有这样的文件或目录python”激活Python环境
- android - FloatingActionButton 在 API 19 中有奇怪的背景
- c++ - ReLU函数在C++上的实现
- mysql - mysqlimport 如何在内部工作?