13.html-fragments.md

HTML Fragments

Introduction

HTML fragments allows you to import HTML files at a given location.
This solves two main problems.

1. Lightweight reuse of elements without having all the web component overhead.
2. Clean up heavy markup into seperate files.

Performance

Separating out HTML can have a performance impact.
It is strongly recommended that you use HTTP2 with this along with push notifications.

Syntax

For fragments, you use a standard template element but provide it with a relative source attribute.

<template src="./fragment/fragment1.html"></template>

Using fragments with view base

You need to know the source location so that relative paths can be calculated from that point.
Bindable element has a html property it uses to define where to get the components html file.
We are reusing this property to calcuate the relative path in a bindable element.
For consistancy sake we reuse the same property and syntax in the view model.

get html() {
    return import.meta.url;
}

This is a requirement for fragments to work. Since you are doing this already in the bindable element, you just need to remember to do this on the view model.

Note

When using fragments the path is relative to the context.
For example, if you use this with crs-widget, and you have template fragments in the HTML you send to the widget, the path must be relative to the context you pass on.

folder
    context.js
    properties
        _common.html
        widget1.html
        wdiget2.html

widget1.html and widget2.html uses _common.html for properties common between the two.
because context.js defines the context url the path you need to define would be template src="properties/_common.html".
If you like however you can update the html property in context.js to include the properties folder.
In that case you just need to define the template as template src="./_common.html"