HTML Swap Fragment

Create a HTML file

Create a plain HTML file for the HTML Swap Fragment. Wrap the entire snippet in one element whose class selector matches every target element you want to update; the fragment will replace all matching elements across the page.

/fragments/swap/img.html

<img src="/img/logo.webp" alt="" class="ing">copy

Place HTML Swap Fragment

Drop empty placeholders anywhere you need the fragment; give each one the same class name you used in the fragment file.

<body>
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
</body>                 
            copy

📜 Note

Always use class name for swap and placeholders identification .

Configuring HTML Swap Fragment

Add a swap property to the ref object in /reference.js. Its value is key and value

key – the key will be the selector of element that will be replaced (same selector as the fragment wrapper)
value – value will be the absolute path to the HTML Swap Fragment file

export const ref = {
    swap:{
        "img.img": "/fragments/swap/img.html"
    }
}copy

Parameter of HTML Swap Fragment

Pass values to a swap fragment by adding data-* attributes to any placeholder element. Use as many parameters as you need; inside the fragment write ${data-*} (for example ${data-height}). Fragmenium first substitutes the parameter, then replaces the placeholder.

/index.html

<body>
    <img src="" alt="" class="img" data-height="100">
    <img src="" alt="" class="img" data-height="100">
    <img src="" alt="" class="img" data-height="100">
</body> 
            copy

/fragments/swap/img.html

<img src="/img/logo.webp" alt="" class="ing" height="${data-height}">copy