How to use MDC components within lit element?

Question

I am trying to use a mdc-component (say mdc-textfield) within a lit element. Looks like I have to import both css and js files into the element.

I'm quite unsure of how to import css into the lit-element.

BTW I use polymer serve without any preprocessors or compiler.

Answer 1

I recommend to wait for Material Component Web Components

But answering your question, to use MCD you need to use sass, then you will need a pre-compiler. Once you have compiled to CSS you can import it into your component:

const anyStyle = html`<style src="path/to/compiled/style.css"></style>`;

I recommend to use a watcher to automatically build the sass files while you are running polymer serve