Skip to content

htmx-head extension not appending inline style element #174

@anuj-scanova

Description

@anuj-scanova

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions