MDC data-table in lit-element

Question

I'm trying to make own component using lit-element and I want to use mdc-datable styles in it. I've made import from '@material/data-table' and copied example code from here https://material.io/components/data-tables/web#data-tables but there're no styles on page after rendering .I know that lit-element renders into shadow root. How I can apply mdc styles in my component? I've tried to include styles directly in head by link and it works but I think that it's bad solution for this case.

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

You can add a <link> element to your shadow root, or you can load up the data-table styles using something like rollup-plugin-lit-css

assuming the styles are located at /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
  `;
}

or using the rollup plugin:

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