The HTML file location.
A JJDF wrapping a DocumentFragment parsed from the fetched HTML.
Because this function returns a detached fragment, you can load templates:
The returned JJDF is suitable for both Shadow DOM and Light DOM flows.
// Eager loading: fetch once at module scope, then reuse
const templatePromise = fetchTemplate(import.meta.resolve('./my-card.html'))
class MyCard extends HTMLElement {
#root
async connectedCallback() {
this.#root = JJHE.from(this).setShadow('open').shadow
this.#root.addTemplate(await templatePromise)
}
}
// Lazy loading: initialize once on first connection
class MyLazyCard extends HTMLElement {
static #templatePromise
#root
async connectedCallback() {
this.#root = JJHE.from(this).setShadow('open').shadow
if (!MyLazyCard.#templatePromise) {
MyLazyCard.#templatePromise = fetchTemplate(import.meta.resolve('./my-lazy-card.html'))
}
this.#root.addTemplate(await MyLazyCard.#templatePromise)
}
}
Fetches an HTML template and returns it as a wrapped
DocumentFragment.