ht-pipe attribute

`ht-pipe` attribute reference

Overview

The ht-pipe attribute moves target elements or target element contents.

Example

This example shows the ht-pipe attribute being used to template a <style> element.

theme/partials/footer.html

 1<footer>
 2    <style ht-pipe='head'>
 3        /* Footer Styles */
 4        footer {
 5            display: block;
 6            width: 100%;
 7        }
 8    </style>
 9    <p>&copy; 2025 Herd Works &bullet; made with ❤️ in Portland, Oregon</p>
10</footer>

This template will cause the <style> element to be moved from its original position in the <footer> element to its configured destination: the <head> element.

Example output

Let's see what would happen if our example <footer> element is loaded from the following layout template:

 1<!DOCTYPE html>
 2<html lang="en-US">
 3    <head>
 4        <title></title>
 5        <link rel='stylesheet' href='/css/styles.css'>
 6        <style id='components'></style>
 7        <style id='layout'>
 8            /* Layout-specific style overrides */
 9            :root {
10                --container-width: 840px;
11            }
12        </style>
13    </head>
14    <body>
15        <header ht-include='partials/header'></header>
16        <article ht-include='partials/article'></header>
17        <footer ht-include='partials/footer'></footer>
18    </body>
19</html>

The <footer> element would be included into the generated page, but the footer's <style> element would be moved (appended) to the <head>!

 1<!DOCTYPE html>
 2<html lang="en-US">
 3    <head>
 4        <title></title>
 5        <link rel='stylesheet' href='/css/styles.css'>
 6        <style id='layout'>
 7            /* Layout-specific style overrides */
 8            :root {
 9                --container-width: 840px;
10            }
11        </style>
12        <style>
13            /* Footer Styles */
14            footer {
15                display: block;
16                width: 100%;
17            }
18        </style>
19    </head>
20    <body>
21        <header>
22            <!-- the header element would be included here -->
23        </header>
24        <article>
25            <!-- the article element would be included here -->
26        </header>
27        <footer>
28            <p>&copy; 2025 Herd Works &bullet; made with ❤️ in Portland, Oregon</p>
29        </footer>
30    </body>
31</html>

When HyperTemplates encounters an element with an ht-pipe attribute, it uses the provided selector to query the document for a destination element. If a matching element is found, it proceeds to move the target element into the destination element.

In this example, the ht-pipe='head' attribute defines head as the selector, which HyperTemplates uses to query the document (which query is effectively document.querySelector("head")).

Specification

Supported elements

The ht-pipe attribute can be used with any HTML element.

NOTE: some ht-pipe configurations may yield unexpected results. See pipe types for more information.

Attribute syntax

The ht-pipe attribute provides content templating instructions, expressed as a single type:selector pair, where selector is a valid CSS selector.

Example

1<style ht-pipe='element:head'></style>

In this example, an element pipe has been configured to append the target <style> element to the <head> element. Because the element pipe type is the default, this pipe could be configured as follows:

1<style ht-pipe='head'></style>

See pipe types for more information.

Destination elements

All ht-pipe attribute must define a selector (see attribute syntax) to indicate where the target element should be moved to. The element selected by the configured selector is referred to as the destination element.

NOTE: ht-pipe elements cannot be processed without a destination element. In cases where the pipe selector does not match another element in the document, no action is taken.

Pipe types

The ht-pipe attribute is used to move HTML elements. The manner in which elements are moved can be configured by providing a pipe "type" (see attribute syntax). The currently supported types are element (default), text, css, and javascript. The css and javascript pipe types are aliases for text.

Element pipes append the target HTML element to the destination element.
Text pipes append the target HTML element contents (as text nodes) to the destination element.

NOTE: Unsupported types are ignored, effectively resulting in the default behavior (element pipes).

Example

1<style ht-pipe='css:style#components'>
2    /* Your cool styles go here */
3</style>

In this example, we're creating a text pipe to move the contents of the target <style> element to the style#components element. Text pipes make it possible to aggregate snippets of code from multiple layout partials into a single element.