Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Material Web Components vs Material Components Web

Tags:

javascript

material-design

custom-element

web-component

material-components-web

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.

like image 597
I should change my Username Avatar asked Sep 02 '19 06:09

I should change my Username

People also ask

What is material Web Components?

Material Web is Google's UI toolkit for building beautiful, accessible web applications. Material Web is implemented as a collection of web components. The Material team is currently working on Material You (Material Design 3) support for Material components.

What is material MDC?

Introduction. Material Components (MDC) help developers implement Material Design. Created by a team of engineers and UX designers at Google, MDC features dozens of beautiful and functional UI components and is available for Android, iOS, web and Flutter.

Video Answer

1 Answers

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.

like image 80
koma Avatar answered Oct 02 '22 05:10

koma
Sign in to Comment

Related questions

Adding a conditional to mustache/php
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead
Simple Promise and Then implementation
different style for continuous css class
Sorting a string array with uppercase first including accents
How long is the delay for CSS scroll snap?
how to integrate vue.js with django?
JavaScript reference drop
VoiceOver does not react to anchors and changing focus on iOS properly
Clearing out typed text from a vuetify v-autocomplete after drop down item is selected
How to create multiple pages with different languages from one template?
React testing library cannot find any components used inside react-responsive media queries
How to cancel a wasm process from within a webworker
What is O(1) space complexity in term of Javascript code with example
Multiple named router-outlet - component imported but not initialized and rendered
What is the purpose of <template> usage in Vuetify?
Chart.js Timeseries chart - formatting and missing data values
Bounding box of multiple overlapping rectangles
Difference between useRef and normal variable
Chaining package.json scripts to start Express server and Vue app

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!