我正在尝试使用 Polymer 3 构建网络应用程序。
我不知道为什么，但是 :host 元素中的 css 属性没有应用
在 login.js 文件中，css properties { display: block; min-height: 100vh;} 似乎没有应用。 当我转到 chrome 调试器中的“元素”选项卡时，该元素没有任何样式，我不知道为什么。
有人知道我哪里搞砸了吗？
非常感谢
索引.html :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>v4</title>
<link rel="icon" type="image/png" href="res/img/favicon-16x16.png" sizes="16x16">
<script src="lib/page/page.js"></script>
<script type="module" src="/src/v4-app/v4-app.js" crossorigin></script>
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
font-size: 13px;
line-height: 1.5;
min-height: 100vh;
}
v4-app {
display: block;
min-height: 100vh;
}
</style>
</head>
<body>
<v4-app></v4-app>
</body>
</html>
v4-app.js :
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@polymer/polymer/lib/elements/dom-if.js';
import '../login/login.js';
import '../application/application.js';
import '../shared-styles/shared-styles.js';
/**
* @customElement
* @polymer
*/
class V4App extends PolymerElement {
static get template() {
return html`
<!-- shared styles -->
<style include="shared-styles">
<!-- additional styles go here -->
</style>
<template is="dom-if" if="{{isLogin}}">
<app-login></app-login>
</template>
<template is="dom-if" if="{{isDashboard}}">
<application-dashboard></application-dashboard>
</template>
`;
}
static get properties () {
return {
"isLogin" : {
"type" : Boolean,
"value" : true
},
"isDashboard" : {
"type" : Boolean,
"value" : false
}
}
}
}
window.customElements.define('v4-app', V4App);
登录.js :
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '../shared-styles/shared-styles.js';
/**
* @customElement
* @polymer
*/
class AppLogin extends PolymerElement {
static get template() {
return html`
<!-- shared styles -->
<style>
<!-- additional styles go here -->
:host {
display: block;
min-height: 100vh;
}
</style>
<div class="fullWidthHeight overflowHidden flexHorizontalAlign">
<div class="width50 flexHorizontalCenter">
<img src="../../res/img/logo.png" />
</div>
</div>
`;
}
}
window.customElements.define('app-login', AppLogin);
最佳答案
好吧，我找到我搞砸的地方了......
<!-- shared styles -->
<style include="shared-styles">
<!-- additional styles go here -->
</style>
评论 ... 他们应该使用/* ... */格式。这就是为什么 :host 没有应用
关于javascript - 聚合物 3 : styling :host，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53153333/