Javascript 聚合物3：造型：主体_Javascript_Css_Polymer 3.x

Javascript 聚合物3：造型：主体

javascript css

Javascript 聚合物3：造型：主体,javascript,css,polymer-3.x,Javascript,Css,Polymer 3.x,我正在尝试用Polymer 3构建一个web应用程序我不知道为什么，但是：host元素中的css属性没有被应用在login.js文件中，似乎没有应用css属性{display:block；min height:100vh；}。当我进入chrome调试器中的“元素”选项卡时，元素没有任何样式，我也不知道为什么有人知道我把事情搞砸了吗非常感谢 index.html： <!doctype html> <html lang="fr"> <head>

我正在尝试用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
身体{
保证金：0；
字体系列：“Roboto”，“Noto”，无衬线；
字体大小：13px；
线高：1.5；
最小高度：100vh；
}
v4应用程序{
显示：块；
最小高度：100vh；
}

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

从'@polymer/polymer/polymer element.js'导入{html，polymererelation}；
导入“@polymer/polymer/lib/elements/dom if.js”；
导入“../login/login.js”；
导入“../application/application.js”；
导入“../shared styles/shared styles.js”；
/**
*@customElement
*@聚合物
*/
类V4App扩展了聚合关系{
静态获取模板（）{
返回html`
`;
}
静态获取属性（）{
返回{
“isLogin”：{
“类型”：布尔，
“价值”：真实
},
“仪表板”：{
“类型”：布尔，
“值”：false
}
}
}
}
window.customElements.define（'v4-app'，V4App）；

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

从'@polymer/polymer/polymer element.js'导入{html，polymererelation}；
导入“../shared styles/shared styles.js”；
/**
*@customElement
*@聚合物
*/
类AppLogin扩展了聚合关系{
静态获取模板（）{
返回html`
：主持人{
显示：块；
最小高度：100vh；
}
`;
}
}
window.customElements.define（'app-login'，AppLogin）；

您需要重命名

login

元素，例如

my login

或您喜欢的任何东西

在自定义元素概念中：

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

嗯，我找到了我搞砸的地方

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

评论。。。他们应该使用/*…*/格式。这就是为什么：主机未应用

谢谢您的回复。事实上，我已经为这个例子重写了我的组件名。它们实际上是应用程序登录，应用程序仪表板实际上，这不是一个问题。您可以从该链接获得更多帮助。以及与w3.org的相关链接。