点燃元素中的 MDC 数据表

问题描述

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

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);

解决方法

您可以向影子根添加 <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
  `;
}

或使用汇总插件：

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);