0

我正在尝试使用 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);
4

2 回答 2

1

好吧，我找到了我搞砸的地方......

<!-- shared styles -->
  <style include="shared-styles">
    <!-- additional styles go here -->
  </style>

注释 ... 他们应该使用 /* ... */ 格式。这就是为什么 :host 没有被应用

于 2018-11-05T13:23:19.680 回答
0

您需要重命名login元素之类的东西my-login或任何您喜欢的东西。

在自定义元素概念：

自定义元素名称。根据规范，自定义元素的名称必须以小写 ASCII 字母开头，并且必须包含破折号 (-)。还有一个与现有名称匹配的禁止元素名称的简短列表。有关详细信息，请参阅 HTML 规范中的自定义元素核心概念部分。

了解更多详情

于 2018-11-05T12:04:33.777 回答