Как правильно добавить полимерные элементы 3.0 в набор pwa-starter-kit? - PullRequest
Новая
       41

Как правильно добавить полимерные элементы 3.0 в набор pwa-starter-kit?

0 голосов
/ 05 января 2019

Полимерный элемент 3.0 (например: бумага-карта и кнопка-бумага) не отображается правильно после вставки в одно из представлений pwa-starter-kit (например: my-view2.js). Вставленный элемент выглядит перекрывающим макет приложения, как бумажная карта на этом рисунке.

enter image description here

Я попытался изменить порядок, в котором происходит импорт элемента, и местоположение (в разных представлениях, например, в my-app.js). 

import { html } from '@polymer/lit-element';
import { PageViewElement } from './page-view-element.js';
import '@polymer/paper-card/paper-card.js';
import '@polymer/paper-button/paper-button.js';
class MyView1 extends PageViewElement {
render() {
  return html`
  ${SharedStyles}
  <section>
    <h2>Static page</h2>
    <p>This is a text-only page.</p>
    <p>It doesn't do anything other than display some static text.</p>
  </section>
  <section>
    <h2>Welcome</h2>
    <paper-card heading="Emmental" alt="Emmental">
      <div class="card-content">
        Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
      </div>
      <div class="card-actions">
        <paper-button>Share</paper-button>
        <paper-button>Explore!</paper-button>
      </div>
    </paper-card>
    `;
  }
}

window.customElements.define('my-view1', MyView1);
...