有没有materialize-css的webcomponent版本

Question

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

有没有人尝试过使用 materialize-css 构建 web 组件？我能够获得样式，但还没有弄清楚如何让底层的 javascript/icons 出现：

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

Answer 1

materialize-css 很可能无法很好地处理 ShadowRoot（在 javascript 部分），如果您不关心 shadow-root，您可以通过覆盖方法 createRenderRoot 来禁用它

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

但是“样式”方法将不再起作用，您必须全局声明您的 css。