@scoped-elements/material-web

Material Web Components packaged in scoped custom elements registries using @open-wc/scoped-elements

Usage no npm install needed!

<script type="module">
  import scopedElementsMaterialWeb from 'https://cdn.skypack.dev/@scoped-elements/material-web';
</script>

README

@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

npm i @scoped-elements/material-web

Usage

As an sub element in your own custom element

import { Checkbox } from '@scoped-elements/material-web';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';

export class CustomElement extends ScopedElementsMixin(LitElement) {
  static get scopedElements() {
    return {
      'mwc-checkbox': Checkbox
    };
  }

  render() {
    return html`
      <mwc-checkbox checked></mwc-checkbox>
    `;
  }
}

As a globally defined custom element

import { Checkbox } from '@scoped-elements/material-web';

customElements.define('mwc-checkbox', Checkbox);

// 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.