在 litElement 中使用 Material Web Component

Question

我正在尝试使用 Polymer 项目中的 PWA Starter Kit 制作一个小应用程序。

是否可以在我的 LitElement 中使用来自 https://material.io/develop/web/components/input-controls/text-field/ 的网络组件？我想使用文本区域。

我尝试过的：

import {html, customElement, LitElement} from "lit-element";
//
import {MDCTextField} from '@material/textfield';

@customElement('text-editor')
export class TextEditor extends LitElement {

    protected render() {
        return html`<div class="mdc-text-field mdc-text-field--textarea">
  <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
  <div class="mdc-notched-outline">
    <div class="mdc-notched-outline__leading"></div>
    <div class="mdc-notched-outline__notch">
      <label for="textarea" class="mdc-floating-label">Textarea Label</label>
    </div>
    <div class="mdc-notched-outline__trailing"></div>
  </div>
</div>`
    }

}

但是，因为我没有在任何地方使用 "MDCTextField"，TypeScript 编译器会抱怨“'MDCTextField' 已声明，但它的值从未被读取。”。

我确实在 HTML 中得到了一个文本区域，但是 none 的样式被应用了。

如何在 LitElement 中重用 MDCTextField Web 组件？

Answer 1

是的，您必须使用 LitElement 的 static styles，它使用可构造样式以及 non-supporting 浏览器的回退：

import { html, customElement, LitElement, unsafeCSS } from 'lit-element';

import { MDCTextField } from '@material/textfield';

// IMPORTANT: USE WEBPACK RAW-LOADER OR EQUIVALENT
import style from 'raw-loader!@material/textfield/dist/mdc.textfield.css';

@customElement('text-editor')
export class TextEditor extends LitElement {

  static styles = [unsafeCSS(style)];

  private textField?: MDCTextField;

  connectedCallback() {

    super.connectedCallback();

    const elm = this.shadowRoot!.querySelector('.mdc-text-field')! as HTMLElement;

    if (elm && !this.textField) {
      // Element is re-attached to the DOM
      this.makeTextField();
    }
  }

  disconnectedCallback() {
    if (this.textField) {
      this.textField.destroy();
      this.textField = undefined;
    }
  }

  render() {
    return html`
      <div class='mdc-text-field mdc-text-field--textarea'>
        <textarea id='textarea' class='mdc-text-field__input' rows='8' cols='40'></textarea>
        <div class='mdc-notched-outline'>
          <div class='mdc-notched-outline__leading'></div>
          <div class='mdc-notched-outline__notch'>
            <label for='textarea' class='mdc-floating-label'>Textarea Label</label>
          </div>
          <div class='mdc-notched-outline__trailing'></div>
        </div>
    </div>`;
  }

  firstUpdated() {
    // Executed just once
    this.makeTextField();
  }

  private makeTextField() {
    const elm = this.shadowRoot!.querySelector('.mdc-text-field')! as HTMLElement;

    this.textField = new MDCTextField(elm);
  }

}

这些是您需要做的事情：

使用 Webpack 或 rollup 等捆绑器将 CSS 文件作为字符串读取。在上面的示例中，我将 Sebpack 与 raw-loader.
使用 firstUpdated 生命周期事件首次呈现组件时初始化 MDCTextField。
随后，一个组件可能会被删除并re-inserted进入DOM，因此您将需要销毁、清理和re-initialize MDCTextField实例。

在 litElement 中使用 Material Web Component

Using a Material Web Component inside a litElement

web-component

polymer-starter-kit

lit-element