How to get the module URL for custom-element?

Answer: by defining the following attributes in cem-module-url:
  1. src with the required URL or mapped module/resource specifier
  2. slice to read the resolved absolute URL
  3. optional referrer to set the URL used for relative resolution and import-map scopes matching
URL properties are part of slice data and the value is a full URL. Use referrer-selector only when resolution must enter one rendered descendant DCE's complete local map context; a URL-valued referrer changes the base and import-map scope matching without changing context.

Where to use cem-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 mapped resource examples below.


The CEM runtime captures the page import map and resolves it through the scope-aware CEM resolver. It does not use the JavaScript module containing the runtime as the implicit import.meta.resolve() referrer.

Where NOT to use cem-module-url?

Answer:
  1. for relative or absolute src values on cem-element, which already resolve from the declaration base URL; resolve a mapped bare specifier first and pass its URL to a dynamic declaration
  2. for getting/setting the page URL,
    - see How to set page URL in custom-element?

See also

Scoped CSS imports and resource overrides

How to use external templates?

How to resolve module URLs with explicit referrers?

CEM-QL string functions