htmx headタグサポート拡張機能

head-support 拡張機能は、htmxリクエストへのレスポンスに headタグ のサポートを追加します。

htmxは、body タグ内のHTMLの *部分的な置換* に焦点を当てたライブラリとして始まりました。そのため、headタグなどの追加情報をマージすることは、ライブラリの焦点ではありませんでした。（これは、例えば、AJAX経由で取得したWebページ全体をブラウザにマージすることに焦点を当てたTurboLinksとは対照的です。）

hx-boost 属性は、htmxを完全なHTMLドキュメントサポートの世界に近づけ、title タグをhead要素から抽出するサポートが最終的に追加されましたが、完全なheadタグサポートはライブラリの機能ではありませんでした。この拡張機能は、その欠点を解消します。

インストール

<script src="https://unpkg.com/htmx-ext-head-support@2.0.1/head-support.js"></script>

使用方法

<body hx-ext="head-support">
...
</body>

これをインストールすると、htmxが受信するレスポンスにhead タグが含まれている場合（ルート<html> 要素を持つ完全なHTMLドキュメントでない場合でも）、処理されます。

headタグの処理方法は、htmxリクエストの種類によって異なります。

htmxリクエストがブーストされた要素からのものである場合、以下のマージアルゴリズムが使用されます。

htmxリクエストがブーストされていない要素からのものである場合、すべてのコンテンツは既存のhead要素に *追加* されます。

いずれの場合でも、この動作をオーバーライドする場合は、新しい<head> タグにhx-head 属性を配置し、次の2つの値のいずれかを指定します。

マージ動作の制御

これに加えて、以下の属性を使用して、個々の要素のマージ動作を制御することもできます。

例

例として、既存のドキュメントの次のheadタグを考えてみましょう。

<head>
<link rel="stylesheet" href="https://the.missing.style">
<link rel="stylesheet" href="/css/site1.css">
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
</head>

htmxがこの新しいheadタグを含むリクエストを受信した場合

<head>
<link rel="stylesheet" href="https://the.missing.style">
<link rel="stylesheet" href="/css/site2.css">
<script src="/js/script2.js"></script>
<script src="/js/script3.js"></script>
</head>

次の操作が行われます。

最終的なhead要素は次のようになります。

<head>
<link rel="stylesheet" href="https://the.missing.style">
<script src="/js/script2.js"></script>
<link rel="stylesheet" href="/css/site2.css">
<script src="/js/script3.js"></script>
</head>

イベント

この拡張機能は、次のイベントをトリガーします。