My use case is to send custom style script after retrieving it from the Django backend. Here is the setup I have
base.html
{% load i18n %}
{% load compress %}
{% load static %}
<!doctype html>
<html lang="en" hx-ext="head-support">
<head>
<meta charset="utf-8">
<title>{% translate 'Processing...' %}</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{% static 'favicon.ico' %}">
<script src="{% static 'plugins/alpinejs-3.13.3/alpinejs.min.js' %}" defer></script>
<script src="{% static 'plugins/htmx-2.0.6/htmx.min.js' %}"></script>
<script src="{% static 'plugins/htmx-ext-head-support/htmx-ext-head-support-2.0.2.js' %}"></script>
<style>
.powered-by {
display: block;
}
#page-content:has(.content) + .powered-by {
display: none;
}
</style>
</head>
<body id="main-body">
<div id="landing-container" class="h-100 overflow-scroll w-100 mx-auto bg-light">
{% block content %}
{% endblock content %}
</div>
</body>
</html>and the response content is
response.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Title</title>
<style id="head-style" hx-head="re-eval">
body {
background-color: #ffcccc;
}
#main-body {
padding: 20px;
font-size: 1.5rem;
color: #333;
}
</style>
</head>
<body>
<div id="main-body" hx-swap-oob="true">
<p>Content Here</p>
</div>
</body>
</html>This is working fine to put <title> from head to the base page and the main-body content also, however it fails to put <style> element to the base html
My use case is to send custom style script after retrieving it from the Django backend. Here is the setup I have
base.html
{% load i18n %} {% load compress %} {% load static %} <!doctype html> <html lang="en" hx-ext="head-support"> <head> <meta charset="utf-8"> <title>{% translate 'Processing...' %}</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="{% static 'favicon.ico' %}"> <script src="{% static 'plugins/alpinejs-3.13.3/alpinejs.min.js' %}" defer></script> <script src="{% static 'plugins/htmx-2.0.6/htmx.min.js' %}"></script> <script src="{% static 'plugins/htmx-ext-head-support/htmx-ext-head-support-2.0.2.js' %}"></script> <style> .powered-by { display: block; } #page-content:has(.content) + .powered-by { display: none; } </style> </head> <body id="main-body"> <div id="landing-container" class="h-100 overflow-scroll w-100 mx-auto bg-light"> {% block content %} {% endblock content %} </div> </body> </html>and the response content is
response.html
This is working fine to put
<title>from head to the base page and themain-bodycontent also, however it fails to put<style>element to the base html