htmx
htmx copied to clipboard
Dynamically load CSS
Currently, htmx parses <script> tags in a dynamically loaded HTML fragment, but it does not do the same for stylesheets. It would be great if we could make this work:
index.html
<script src="https://unpkg.com/htmx.org"></script>
<div hx-get="dynamic.html" hx-trigger="load"></div>
dynamic.html
<!-- Either load linked stylesheets -->
<link rel="stylesheet" href="test.css" />
<!-- Or parse inline styles -->
<style>
.red {color:red;}
</style>
<b class="red">This is Red</b>
<b class="blue">This is Blue</b>
I'm using HTMX for the first time, and I've observed that both inline styles and stylesheets in the HTML fragment are parsed as long as the <link> tag isn't the first tag in the fragment. When the <link> tag is first, no styles are parsed. When I start the fragment with even an empty tag like <span></span> or <script></script>, then styles are parsed.