e111077
commented
4 years ago NOTE: the answer below is for an older verision of this library that implemented Material 2. See the update at the bottom for Material 3
Hello, unfortunately due to the nature of the global scope of customElements.define and the fact that there cannot be two versions of lit-html on a page, there needs to be some sort of dependency deduplication. Thus bundling our components means that we would need to bundle lit-html and sub-components used which would cause duplication if you use multiple components that conflict. For example:
mwc-select has a dependency of mwc-menu and both of these have a dependency on lit-html.
This means that if we bundle this, the bundle will have one version of each definition as well as one version of lit-html.
Then assume you want to use mwc-menu and then also import our mwc-menu bundle alongside mwc-select. This now means there are multiple definitions of mwc-menu on the page and lit-html on the page. This leads to:
- exceptions being thrown while loading
mwc-menu - two versions of lit-html on the page which breaks quite a lot of our elements using directives
Until the polymer team creates another CDN that allows you to upload a package-json and if you do not care about bundling, I would recommend a JIT CDN such as unpkg which supports ES modules with the ?modules query param. e.g.
<head>
<script type="module" src="https://unpkg.com/@material/mwc-select?module"></script>
<script type="module" src="https://unpkg.com/@material/mwc-menu?module"></script>
<script type="module" src="https://unpkg.com/@material/mwc-list/list-item.js?module"></script>
</head>
<body>
<mwc-select>
<mwc-list-item></mwc-list-item>
<mwc-list-item value="apple">Apple</mwc-list-item>
</mwc-select>
<mwc-menu>
<mwc-list-item></mwc-list-item>
<mwc-list-item value="apple">Apple</mwc-list-item>
<mwc-menu>Here is an example of unpkg working in jsbin which does no compilation.
UPDATE Material 3:
If you would like to import all of our components with one import and with fewer network requests, you can use https://esm.run and import the all.js file. e.g.
<head>
<script type="module" src="https://esm.run/@material/web/all.js"></script>
</head>
<body>
<md-filled-select>
<md-select-option></md-select-option>
<md-select-option value="apple" headline="Apple"></md-select-option>
</md-filled-select>
<md-filled-button id="anchor">Open Menu</md-filled-button>
<md-menu fixed id="menu" anchor="anchor">
<md-menu-item></md-menu-item>
<md-menu-item value="apple" headline="Apple"></md-menu-item>
<md-menu>
<script>
anchor.addEventListener('click', () => {
menu.show();
});
</script>
</body>
kj7rrv
jfbrennan
asyncLiz
Is your feature request related to a problem? Please describe. Not everyone uses a build step. This is unusable without one.
Describe the solution you'd like I would like a way to use this with just CSS and JS from a CDN.