Web Components Library

Contributing Guide

Quick start

1) Install

Install the component library using NPM:

1. Check first if your machine is configured to access our private NPM Repository on Artifactory using the setup guidelines below:

For your npm command line client to work with Artifactory, you first need to set the default npm registry with an Artifactory npm repository using the following command:

npm config set @my-lib-org:registry https://your-registry-url/

There are two ways to authenticate your npm client against Artifactory: using the npm login command or using basic authentication.

Using npm login Run the following command in your npm client. When prompted, provide your Artifactory login credentials:

npm login

Using basic authentication

Alternatively, you can paste the following into the ~/.npmrc file (in Windows %USERPROFILE%/.npmrc):

_auth = anonymous:<PASSWORD> (converted to base 64)
email = youremail@email.com
always-auth = true

Preferable approach

Using basic authentication, you also need to paste the following into the ~/.npmrc file (in Windows %USERPROFILE%/.npmrc) or in the .npmrc file on the root folder of your project:

@my-lib-org:registry=https://your-registry-url/
//your-registry-url/:_password=<BASE64_PASSWORD>
//your-registry-url/:username=anonymous
//your-registry-url/:email=youremail@email.com
//your-registry-url/:always-auth=true

npm install @my-lib-org/mylib

2) Adding the components to your Project

Setup - React

Setup - Angular Setup - Angular Form Wrapper

Setup - Vanilla HTML (HTML5 Boilerplate)

Supporting older browsers

Material Web uses modern browser features that are natively supported in the latest versions of Chrome, Safari, Firefox, and Edge. IE11 and some older versions of other browsers are also supported, but they require additional build steps and polyfills.

Feature	Chrome	Safari	Firefox	Edge	IE11
Web Components					*
Modules					*
ES2015					*

Web Components

To support Web Components in IE11 and other older browsers, install the Web Components Polyfills:

npm install @webcomponents/webcomponentsjs

And include the webcomponents-loader.js script in your HTML, which detects when polyfills are needed and loads them automatically:

<!-- Add support for Web Components to IE11. -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>