Material Web Components vs Material Components Web

Question

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 components enable a reliable development workflow to build beautiful and functional web projects.

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

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

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

Arbitrary

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> – Kamala

Yup, that's what i meant by re-implementation of MDC with web components in LitElements. Are there other differences. – Arbitrary

Answer 1

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 completely self-contained. The CSS and javascript are part of the component and isolated from the rest of the page.

Phytogeography

Answer 2

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-components-web doesn’t use custom elements, while material-components-web-components does.

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

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

Emeritaemeritus