I'm trying, with Polymer 3, to build a web app.
I don't know why, but css properties inside the :host element are not applied
In the login.js file, css properties { display: block; min-height: 100vh;} seems to not be applied. When I go to the "elements" tab in the chrome debugger, the element don't have any style, and I don't know why.
Does anyone know where i've messed up?
thanks a lot
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 :
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 :
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);
You need to rename
loginelement something likemy-loginor what ever you like.At custom elements concept:
For more detail