Material Web components in Anvil?

[stein]

Has anyone tried to create custom components from the Material web component library?

Web — Material Design 3

Components – Material Design 3

[hans.melberg]

I tried some months ago, but ended up using https://shoelace.style/. I did not create custom components, but used js and added the components to the DOM (inside brython or pyodide, so events could be hooked up to python functions). Making custom components sounds like a better idea!

[socint]

I make them from design systems all the time. It’s cathartic.

[stein]

I was going to try it out, but immediately got stuck…

It seems to me that you cannot load the scripts directly from a CDN, but would have to install and bundle components yourself.

1. Am I right in concluding that I shoudn’t even try until available on a CDN? Or is there a simple trick?

2. Could a workaround be that a designer pick the components I need from the material design 3 Figma plugin and export html and css from there, and I could use those to build custom Anvil components? Or would that require too much work?

The fantastic solution would be if Anvil upgraded their material design theme to include native Anvil implementations for all the material components, ref this feature request ( to upvote):

Upgrade Material 3 theme

For Material 3 theme apps: It would be fantastic if most of the Material 3 components could be included as native components. And the icons you chose in design mode would be Material Symbols and Icons - Google Fonts, instead of fontawesome. And perhaps also make it possible to import colors from the Materal Design theme builder. This would make it easy to build beautiful anvil apps. Anvil will always be compared with js frameworks that focus only on the UI. I think by going all the way with…

material-components/material-web/blob/main/docs/quick-start.md

[stucork]

Hi @stein, after your post I had a quick look at the web components you linked to and had a play.

It’s possible to do this via cdn so long as you don’t mind targeting modern browsers that support import maps (safari only added this support in 2023). (If you want to go down this rabbit hole, you can take a look at jspm.io and get the required import maps to make it work).

It’s worth noting that the web components you linked to are incomplete. If you take a look at the roadmap you’ll see what is/isn’t implemented.

I think it speaks volumes that the m3 team themselves only have a partial implementation of their own design system.

But I would also say watch this space