聚合物3：样式：主体
[英]Polymer 3 : styling :host
问题描述
I'm trying, with Polymer 3, to build a web app. 
我正在尝试使用Polymer 3构建一个Web应用程序。
I don't know why, but css properties inside the :host element are not applied 我不知道为什么，但是：host元素内的CSS属性未应用
In the login.js file, css properties { display: block; 在login.js文件中，css属性{display：block; min-height: 100vh;} seems to not be applied. min-height：100vh;}似乎未应用。 When I go to the "elements" tab in the chrome debugger, the element don't have any style, and I don't know why. 当我转到chrome调试器中的“元素”标签时，该元素没有任何样式，而且我也不知道为什么。
Does anyone know where i've messed up? 有人知道我在哪里搞砸吗？
thanks a lot 非常感谢
index.html : index.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 : 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);
login.js : login.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);
2 个解决方案
解决方案1
1 2018-11-05 13:23:19
Well, I found where I messed up ... 好吧，我发现我搞砸了...
<!-- shared styles -->
<style include="shared-styles">
<!-- additional styles go here -->
</style>
Comments ... they should use the /* ... */ format. 注释...，应使用/ * ... * /格式。 That's why :host wasn't applied 这就是为什么：host没有被应用
解决方案2
0 2018-11-05 12:04:33
You need to rename login element something like my-login or what ever you like. 您需要将login元素重命名为“ my-login或您喜欢的名称。
At custom elements concept: 在自定义元素概念上：
Custom element names.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.