Material Web Components

Material Design implemented in Web Components (Custom Elements v1) https://dannymoerkerke.github.io/material-webcomponents/

Getting started

To install Material Web Components run:

npm install @dannymoerkerke/material-webcomponents

Then simply import the component you need in your script, for example:

import './node_modules/@dannymoerkerke/material-webcomponents/src/material-button.js';

Or include it with a script tag as an ES6 module:

<script src="node_modules/@dannymoerkerke/material-webcomponents/src/material-button.js" type="module"></script>

Add the HTML tag:

<material-button label="Confirm" raised></material-button>

...and you're in business!

Documentation

Refer to https://dannymoerkerke.github.io/material-webcomponents/ for documentation of each component.

Demo

To run the demo, run npm install once and then npm start and view the demo on http://localhost:8080/material-webcomponents

Testing

Run npm test and view the results on http://localhost:8080/ or run npm run test:headless to run the tests on the command line.

This repo also contains the configuration file wallaby.js to run the tests from your IDE using Wallaby.js

Browser support

• Chrome 53+
• Firefox 63+
• Safari 10+
• iOS Safari 10+
• Chrome Android 71+
• Firefox Android 64+
• Edge 16+ (with polyfill)

Polyfilling Edge 16+

Refer to /lib/polyfill-loader.js to see how the webcomponentsjs polyfill and the Webpack bundle are loaded. The Webpack bundle only parses the CSS inside Shadow DOM. Note that the webpack loader is only suitable for browsers that do not support Shadow DOM.