0

Polymer 3 を使用して Web アプリを構築しようとしています。

理由はわかりませんが、:host 要素内の css プロパティが適用されません。

login.js ファイルでは、css properties { display: block; min-height: 100vh;} が適用されていないようです。Chrome デバッガーの [要素] タブに移動すると、要素にスタイルがありません。その理由がわかりません。

私がどこを台無しにしたか誰か知っていますか？

どうもありがとう

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);
4

2 に答える 2