Compatibility with AMP

[Download]

I am wondering, is Material Components Web compatible with AMP.

I do not find any mention of AMP on this project and the AMP website does not mention Material Components.

Both Google projects seem to be targetting the same kind of modern progressive web app style, but I don't think we are allowed to include the material components web JS script in an AMP page... So can we combine them?

I am wondering about this because I am hoping to support AMP and it would be very convenient if the AMP pages could use the same Material Components as the main pages... But I wonder if it's possible?

Is AMP support a target for you guys?
Do you have pointers on docs/guidance about this?

If I am right in thinking we cannot embed the material-components-web JS script on an AMP page, is there guidance available on which components we can still use if we don't have this script?

[traviskaufman]

Unfortunately Material Components for the web is not compatible with AMP as of now.

AMP doesn't allow JS on its pages, which MDC-Web needs for its more complex components. Furthermore, there are certain restrictions on CSS styles, such as disallowing !important and :not. We make use of both of these constructs within our (S)CSS, since in many cases its needed to facilitate the complexity of the Material Design UX.

Having custom AMP components built that leverage MDC-Web is something that we can definitely investigate in the future, but it's not on our radar right now.

[Download]

Thanks for your explanation!

[niutech]

You can use the AMP Surface CSS-only framework to create AMP pages - see the demo.

[ronnieroyston]

Curious of MDC-Web could provide guidance on achieving some goals of the AMP project, namely, fastest possible loading / rendering of pages. One thing I see them doing in AMP is embedding the CSS in the head and avoiding reflow / repaint of the page. Usage of srcset and art direction. Seems like we could get this baked into the Getting Started Guide or a Best Practices Guide.

As an aside, AMP's caching seems to be heavily highlighted. Doesn't Firebase hosting have this baked in already (i know getting off topic, ..but)

[niutech]

Update: I have also AMP-lified another Material Design CSS framework MUI - see the demo.