@scoped-elements/material-web

This is the Material Web Components library packaged using the scoped custom elements registries pattern using @open-wc/scoped-elements.

Installation

1npm i @scoped-elements/material-web

Usage

As an sub element in your own custom element

1import { Checkbox } from '@scoped-elements/material-web';
2import { ScopedElementsMixin } from '@open-wc/scoped-elements';
3
4export class CustomElement extends ScopedElementsMixin(LitElement) {
5  static get scopedElements() {
6    return {
7      'mwc-checkbox': Checkbox
8    };
9  }
10
11  render() {
12    return html`
13      <mwc-checkbox checked></mwc-checkbox>
14    `;
15  }
16}

As a globally defined custom element

1import { Checkbox } from '@scoped-elements/material-web';
2
3customElements.define('mwc-checkbox', Checkbox);
4
5// Use in the same way as the material components library in the html

Documentation for the elements

As this package is just a re-export, you can find the documentation for the elements in each of their npm pages, e.g.: https://www.npmjs.com/package/@material/mwc-checkbox.