MDC数据表- lit-element

Question

我正在尝试使用lit-element制作自己的组件，我想在其中使用mdc-datable样式。我已经从‘@ https://material.io/components/data-tables/web#data-tables /data-table’导入了数据，并从这里复制了示例代码，但是在渲染.I之后，页面上没有样式，我知道lit-element渲染到阴影根中。如何在组件中应用mdc样式？我已经尝试过直接在head by link中包含样式，它是有效的，但我认为这对这种情况来说是一个糟糕的解决方案。

import { LitElement, html, css} from 'lit-element';
import '@material/data-table';

class CatalogItemsList extends LitElement
{
    static get properties() 
    {

    }

    static get styles() 
    {
        return css``;
    }

    get root() 
    {
        return this.shadowRoot || this;
    }
    
    constructor() 
    {
        super();
    }

    render ()
    {
        return html` html code from example `;
    }
}

customElements.define('catalog-items-list', CatalogItemsList);

Answer 1

您可以将<link>元素添加到影子根目录中，也可以使用类似于rollup-plugin-lit-css的命令加载数据表样式

假设样式位于/node_modules/@material/data-table/style.css

render () {
  return html`
    <link rel="stylesheet" href="/node_modules/@material/data-table/style.css"/>
    html code from example
  `;
}

或者使用rollup插件：

import style from '@material/data-table/style.css';

class CatalogItemsList extends LitElement {
  static get styles() {
    return [style, css``];
  }

  render () {
    return html`
      <link rel="stylesheet" href="/node_modules/@material/data-table/style.css"/>
      html code from example
    `;
  }
}

customElements.define('catalog-items-list', CatalogItemsList);