是否存在materialize-css的Web组件版本>> [

Question

materialize-css是否有任何“ webcomponent”版本？

有人尝试使用materialize-css构建Web组件吗？我能够得到样式，但是还没有弄清楚如何使基本的javascript / icon出现：

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

是否存在materialize-css的任何“ webcomponent”版本？有没有人尝试使用materialize-css构建Web组件？我能够得到样式，但是还没有弄清楚如何获得底层的...

Answer 1

[最有可能的materialize-css无法很好地处理ShadowRoot（在javascript部分上，如果您不关心shadow-root，可以通过覆盖方法createRenderRoot将其禁用）>

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