How to get the module URL for custom-element?

Answer: by defining following attributes in module-url:
  1. src with path to module resource, If omitted, it would match the window.location.href
  2. 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:
  1. in scr attribute of <custom-element >
    - It uses the same module resolving mechanism
  2. for getting/setting the page URL,
    - see How to set page URL in custom-element?

See also

How to use external templates?

this page import maps


                {
                "imports": {
                "lib-root": "./lib-dir/",
                "embed-lib": "./lib-dir/embed-lib.html"
                }
                }
{ "imports": { "lib-root": "./lib-dir/", "embed-lib": "./lib-dir/embed-lib.html" } }

1. relative to page path

Should render Vulcan Salute 🖖 with link to embed-1.html, link should open the page

        <custom-element>
            <a href="./embed-1.html">
                <custom-element src="./embed-1.html"></custom-element>
            </a>
        </custom-element>

embed-1.html

🖖

2. module by symbolic name

should render '👋 from embed-lib-component' as link to 'demo-lib/embed-lib.html', link should open the page

embed-lib resolved to ./lib-dir/embed-lib.html by page importmap


        <custom-element>
            <template>
                <module-url slice="lib-url" src="embed-lib"></module-url>
                <if test="//lib-url/@error">
                    <p>error: <b>{//lib-url/@error}</b></p>
                </if>
                check the link:
                <a href="{//lib-url}">
                    <custom-element src="embed-lib#embed-lib-component">
                        failed to load
                    </custom-element>
                </a>
            </template>
        </custom-element>
check the link: 👋 from embed-lib-component

3. module by symbolic name with missing importmap entry

should render error message and `failed to load` broken link

As fakedemo-lib is not in importmaps, the symbolic name is not resolved and renders the error


        <custom-element>
            <template>
                <module-url slice="lib-url" src="fakedemo-lib/embed-lib.html"></module-url>
                <if test="//lib-url/@error">
                    <p>error: <b>{//lib-url/@error}</b></p>
                </if>
                the link is broken:
                <a href="{//lib-url}">
                    <custom-element src="fakedemo-lib/embed-lib.html#embed-lib-component">
                        failed to load
                    </custom-element>
                </a>
            </template>
        </custom-element>

error: Failed to execute 'resolve' on 'import.meta': Failed to resolve module specifier fakedemo-lib/embed-lib.html: Relative references must start with either "/", "./", or "../".

the link is broken: failed to load

4. module path by symbolic name

should render two smiley images and links should open matching page

lib-root resolved to lib-dir by page importmap


        <custom-element>
            <template>
                <module-url slice="lib-url" src="lib-root/embed-lib.html#embed-relative-hash"></module-url>
                <module-url slice="img-url" src="lib-root/Smiley.svg"></module-url>
                <if test="//lib-url/@error">
                    <p>error: <b>{//lib-url/@error}</b></p>
                </if>
                check the link:
                <a href="{//lib-url}"> lib-root/embed-lib.html#embed-relative-hash <img src="{//img-url}" alt=""></a>
                <custom-element src="lib-root/embed-lib.html#embed-relative-hash">
                    failed to load
                </custom-element>

            </template>
        </custom-element>
check the link: lib-root/embed-lib.html#embed-relative-hash 👌 from embed-relative-hash invoking #embed-lib-component :

5. module path by symbolic name to internal link within lib

should render '👍 from embed-relative-file' and Vulcan Salute 🖖. Links should open matching page 

        <custom-element>
            <template>
                <module-url slice="lib-url" src="lib-root/embed-lib.html#embed-relative-file"></module-url>
                <if test="//lib-url/@error">
                    <p>error: <b>{//lib-url/@error}</b></p>
                </if>
                check the link:
                <a href="{//lib-url}"> lib-root/embed-lib.html#embed-relative-file </a>
                <custom-element src="lib-root/embed-lib.html#embed-relative-file">
                    failed to load
                </custom-element>

            </template>
        </custom-element>
check the link: lib-root/embed-lib.html#embed-relative-file 👍 from embed-relative-file invoking ../embed-1.html: loading from ../embed-1.html ...

./lib-dir/embed-lib.html

resides within ./lib-dir and serves a sample of module with multiple templates
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>templates for embedded and external DCE lib dependencies</title>
</head>
<body>
<h1>templates for embedded and external DCE lib dependencies</h1>

<template id="embed-lib-component">
    👋 from embed-lib-component
</template>

<template id="embed-relative-hash">
    👌 from embed-relative-hash invoking
    <module-url slice="full-url" src="./embed-lib.html"></module-url>
    <a href="{//full-url}#embed-lib-component">
        <img src="{//full-url}/../Smiley.svg"/>
        #embed-lib-component
    </a>:
    <custom-element src="#embed-lib-component"></custom-element>
</template>

<template id="embed-relative-file">
    👍 from embed-relative-file invoking
    <module-url slice="up-url" src="../embed-1.html"></module-url>
    <a href="{//up-url}">../embed-1.html</a>:
    <custom-element src="../embed-1.html">
        loading from ../embed-1.html ...
    </custom-element>
</template>

</body>
</html>