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

question from:https://stackoverflow.com/questions/66063017/mdc-data-table-in-lit-element

Answer 1

Waitting for answers