Полимер 3: стиль: хост

Я пытаюсь с помощью Polymer 3 создать веб-приложение.

Я не знаю почему, но свойства css внутри элемента :host не применяются

В файле 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);

логин.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);

javascript css polymer-3.x
person user3197506    schedule 05.11.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ну вот нашел где накосячил...

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

Комментарии... они должны использовать формат /* ... */. Вот почему :host не применялся

person user3197506    schedule 05.11.2018

arrow_upward
0
arrow_downward

Вам нужно переименовать элемент login во что-то вроде my-login или как вам угодно.

В концепции пользовательских элементов:

Пользовательские имена элементов. По спецификации имя пользовательского элемента должно начинаться со строчной буквы ASCII и должно содержать тире (-). Также есть краткий список запрещенных имен элементов, которые совпадают с существующими именами. Дополнительные сведения см. в разделе основных понятий пользовательских элементов в спецификации HTML.

Подробнее

person HakanC    schedule 05.11.2018
comment
Спасибо за ответ. На самом деле, я переписал имя моего компонента для этого примера. Это действительно приложение-логин, приложение-панель. - person user3197506; 05.11.2018
comment
На самом деле дело не в полимере. Вы можете получить дополнительную помощь по этой ссылке. и связанная ссылка с w3.org. stackoverflow.com/questions/26207568/ w3.org/TR/css3-values/#viewport-relative-lengths - person HakanC; 05.11.2018