Are there webcomponent version of materialize-css

Question

Are there any "webcomponent" version of materialize-css?

Has anyone tried to build a webcomponent using materialize-css? I'm able to get the style but haven't figured out how to get the underlying javascript/icons to appear:

import {html, LitElement, css, unsafeCSS} from 'lit-element';

// import 'materialize-css';
import MaterializeCSS from 'materialize-css/dist/css/materialize.min.css';
// import IconFont from 'https://fonts.googleapis.com/icon?family=Material+Icons';

class MaterializeDemo extends LitElement {

    static get styles() {

        return [
            css`
                :host {
                    display: block;
                }
            `,
            unsafeCSS(MaterializeCSS),
            // unsafeCSS(IconFont),
        ];
    }

    render() {
        return html`
<a class="waves-effect waves-light btn">button</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>

<a class="btn-floating pulse"><i class="material-icons">menu</i></a>
<a class="btn-floating btn-large pulse"><i class="material-icons">cloud</i></a>
<a class="btn-floating btn-large cyan pulse"><i class="material-icons">edit</i></a>

        `;
    }

}

customElements.define('materialize-demo', MaterializeDemo);

Possible duplicate of [How to let imported css have effects on elements in the shadow dom?](https://stackoverflow.com/questions/35858494/how-to-let-imported-css-have-effects-on-elements-in-the-shadow-dom) — Supersharp, Aug 31 '19 at 16:24
Did you find a way to use materialize-css with lit-element? I'm trying to do the same. — chenny, Jan 31 '20 at 08:41

score 1 · Answer 1 · answered Jan 24 '20 at 02:19

Most likely materialize-css doesn't handle well the ShadowRoot (on the javascript part), if you don't care about shadow-root you could disable it by overriding the method createRenderRoot

class MaterializeDemo extends LitElement {
  [...]
  createRenderRoot() {
   return this;
  }
}

However the "styles" method won't work anymore and you will have to declare your css globally.

Are there webcomponent version of materialize-css

1 Answers1