### Using Material web components with import maps If you want to use [Material Web Components](https://github.com/material-components/material-web) without any builds or anything, you can make use of [import maps](https://thingster.app/things/anYcdO9sFnlBXElpwTXwG). First, add this into the `<head></head>` section of your pages: ```html <script type="importmap"> { "imports": { "lit": "https://cdn.jsdelivr.net/npm/lit@2/index.js", "lit/": "https://cdn.jsdelivr.net/npm/lit@2/", "@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@1/", "@lit/localize": "https://cdn.jsdelivr.net/npm/@lit/localize/lit-localize.js", "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@1/reactive-element.js", "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@1/", "lit-element/lit-element.js": "https://cdn.jsdelivr.net/npm/lit-element@3/lit-element.js", "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@2/lit-html.js", "lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@2/", "tslib": "https://cdn.jsdelivr.net/npm/tslib@2/tslib.es6.mjs" } } </script> ``` Then you can just import them like this: ```js import '@material/web/textfield/outlined-text-field.js' ``` Then use them like: ```html <md-outlined-text-field></md-outlined-text-field> ```

Thingster
Your public and private notebook
© 2025 – infinity and beyond
Links