HTML Fragment Plugin

A plugin for staticbolt that adds a <fragment> tag. It renders its children without adding any wrapper element to the output.

Installation

The plugin ships as part of @staticbolt/core. You do not need to install anything else.

Usage

In your .staticbolt.ts configuration file:

import { defineConfig } from "@staticbolt/core";
import { htmlFragmentPlugin } from "@staticbolt/core/plugins";

export default defineConfig({
  plugins: [htmlFragmentPlugin()],
});

The <fragment> tag

In the output, a <fragment> tag is replaced by its own children. The tag itself leaves no trace in the final HTML.

That helps when you need to pass several elements into a layout slot without a wrapper element that would affect your markup or styles. Instead of wrapping the content in a <div>, put the slot attribute on a <fragment> tag and the children are slotted in directly.

<fragment>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</fragment>

Outputs:

<p>First paragraph</p>
<p>Second paragraph</p>

With a layout that accepts named slots, put the slot name on a <fragment> to inject several elements without a wrapper.

<fragment slot="head">
  <link rel="stylesheet" href="./page.css" />
  <meta name="description" content="My page" />
</fragment>

Plugin Options

tagName

• Type: string
• Default: "fragment"

The tag name of the custom fragment element.

htmlFragmentPlugin({
  tagName: "template-fragment",
});