Is there any difference between Material Web Components (link) and Material Components Web (link)?

Material Web Components doesn't have much of an explanation other than

Built on top of the Material Components Web project and LitElement, the Material Web Components enable a reliable development workflow to build beautiful and functional web projects.

Whereas material Components Web is

Material Components for the web (MDC Web) helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these ponents enable a reliable development workflow to build beautiful and functional web projects.

Is it an just an re-implementation of all MDC ponents with web ponents in LitElement?

Documentation on Material Web Components is extremely sparse for now, therefore it's been hard to pare using them in test applications.

As an aside, this naming is awful, hopefully they change the name during pre-release.

Is there any difference between Material Web Components (link) and Material Components Web (link)?

Material Web Components doesn't have much of an explanation other than

Built on top of the Material Components Web project and LitElement, the Material Web Components enable a reliable development workflow to build beautiful and functional web projects.

Whereas material Components Web is

Material Components for the web (MDC Web) helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these ponents enable a reliable development workflow to build beautiful and functional web projects.

Is it an just an re-implementation of all MDC ponents with web ponents in LitElement?

Documentation on Material Web Components is extremely sparse for now, therefore it's been hard to pare using them in test applications.

As an aside, this naming is awful, hopefully they change the name during pre-release.

• javascript
• material-design
• web-ponent
• custom-element
• material-ponents-web

• 2 If you look at the examples of how they are used you will see the difference. One provides actual Web Components (Material Web Components) that you can use like <mwc-button raised label="raised"></mwc-button>, while the other provides styles that you can apply to your standard controls (Material Components for the web) like <button class="mdc-button"></button> – Herohtar Commented Sep 2, 2019 at 6:38
• Yup, that's what i meant by re-implementation of MDC with web ponents in LitElements. Are there other differences. – I should change my Username Commented Sep 2, 2019 at 6:46

3 Answers 3

Material Components Web Components project (link) is building on top of the Material Components Web project (link) to create Custom Elements (link).

When using Material Components Web you have to include the CSS and javascript provided by the project in your web pages.

Material Components Web Components defines new HTML tags using the Custom Elements specification. Examples of such tags are <mwc-drawer>, <mwc-icon>.

The new tags are Custom Elements and are pletely self-contained. The CSS and javascript are part of the ponent and isolated from the rest of the page.

Just took a quick look over both.

In theory both projects should do basically the same, if they are following the Material Design standards.

But in any case, the implementation seems different.

material-ponents-web doesn’t use custom elements, while material-ponents-web-ponents does.

material-ponents-web-ponents is using web ponents while material-ponents-web does not.

So I would go with material-ponents-web-ponents.

Your first link: material-ponents/material-web is a set of Material Design ponents that uses custom elements. It uses Lit but works with any framework.

Because it uses custom elements you can use them as tags in your HTML:

<md-element>content</md-element>

It's looking for new maintainers - it's pretty solid, but it looks like Google have dropped support.

The second link: material-ponents/material-ponents-web is an earlier attempt to provide ponents by extending the existing DOM with a script, something like:

<div class="mdc-element"></div>
<script>
  mdc.MDCElement.attachTo(document.querySelector('.mdc-element'));
</script>

This was the standard about a decade ago, and used very successfully by jQuery and the like, but now (unless you need to support ancient versions of IE) the custom elements approach is better, faster, smaller, more reliable and easier to maintain.

In addition, this project is over, according to its maintainers:

This project is no longer actively maintained. While automated updates may still occur, the team will not be prioritizing new features or bug fixes, and those updates will be turned off in the future.

They have moved to Angular Material, and if you're using Angular I remend you check out that project instead.

If you're looking at these now material-web is the better approach, but I'd look around for a project that is more actively supported before mitting to it.