Question

我正在尝试与Polymer 3一起构建Web应用程序。

我不知道为什么，但是：host元素内的css属性未应用

在login.js文件中，css属性{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);

Answer 1

好吧，我发现我搞砸了...

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

注释...他们应该使用/ * ... * /格式。这就是为什么：host未应用

Answer 2

您需要将login元素重命名为my-login之类的名称。

在自定义元素概念上：

自定义元素名称。根据规范，自定义元素的名称必须以小写ASCII字母开头，并且必须包含短划线（-）。还有与现有名称匹配的禁止元素名称的简短列表。有关详细信息，请参见HTML规范中的“自定义元素核心概念”部分。

For more detail

聚合物3：样式：主机

2 个答案: