时间戳

首页 > 解决方案 > mwc-icon 0.7.1 不渲染（使用 lit-element/pwa-starter-kit）？

lit-element - mwc-icon 0.7.1 不渲染（使用 lit-element/pwa-starter-kit）？

问题描述

有没有人让 mwc-icon (0.7.1) 与 lit-element (pwa-starter-kit) 一起工作？

mwc-button 呈现 OK 但 mwc-icon 不呈现图标只是图标索引文本。

import { html } from 'lit-element';
import { PageViewElement } from './page-view-element.js';
import {Icon} from "@material/mwc-icon" //does not work
import {Button} from "@material/mwc-button"

import { SharedStyles } from './shared-styles.js';

class MyView1 extends PageViewElement {
  static get styles() {
    return [
      SharedStyles
    ];
  }

  render() {
    return html`
      <section>
        <h2>Example</h2>
        <mwc-icon>bookmark</mwc-icon>
        <mwc-button outlined label="outlined"></mwc-button>
    `;
  }
}

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

标签： lit-elementpwa-starter-kit

解决方案

我想你遇到了和我一样的问题。

这是因为 Chrome 在第一页加载时只处理一次 @font-face 属性。

当您导入 mwc 样式时，您希望它们在 lit-element 渲染中启用 - 在页面的第一次初始加载之后。这将起作用，您将看到除 @font-face 属性之外的新样式。

这就是您看不到图标的原因。

一个快速的解决方法是在 index.html 的 head 部分和lit-element 中都附加链接，就像您所做的那样。

你可以看到不工作 的例子和工作的例子

不同之处在于 index.html 头部分中添加的链接。

更多细节在这里：github线程

希望我能帮助你。我自己被困了很长一段时间

推荐阅读