importmap custom-element Declarative Custom Element implementation demo

How to get the module URL for `custom-element`?

Answer: by defining following attributes in module-url:

src with path to module resource, If omitted, it would match the window.location.href
slice to read the URL

URL properties would be a part of slice data, the value would be a full URL.

Where to use `module-url`?

Answer: to inject the library resources URL into generated HTML.

Import maps are used for defining the dependencies location on the web page level. This way dependencies could reside on different CDN path or even domains while in the code would be referenced by symbolic package name. See the CDN example bellow.

The resolving of import maps is done by import.meta.resolve(path)

Where NOT to use `module-url`?

Answer:

in scr attribute of <custom-element >
- It uses the same module resolving mechanism
for getting/setting the page URL,
- see How to set page URL in custom-element?

How to get the module URL for custom-element?

Where to use module-url?

Where NOT to use module-url?

See also

How to get the module URL for `custom-element`?

Where to use `module-url`?

Where NOT to use `module-url`?