Description
Would this package be open to adding support for an insertInto option similar to what style-loader supports, which allows clients to specify a selector for the DOM node into which they want link tags inserted inside of? By default, it would be the head.
We have a scenario where some orchestrated content being injected into an existing app inside of <body> and that content contains it's main app.css file. However, any async-loaded CSS files break the expected cascade because they go into <head>. So basically, we end up with a DOM such as:
<html>
<head>
...
<!-- Injected asyncronously -->
<link rel="stylesheet" href="async.css" />
</head>
<body>
...
<!-- Orchestrated content rendered server side on page load -->
<div class="orchestrated-content">
<link rel="stylesheet" href="app.css" />
...
</div>
...
</body>
</head>
When the normal order should be app.css -> async.css.
I'm planning to get a PR together, but the solution is fairly straightforward it seems. I've modified mainTemplate.hooks.requireEnsure.tap locally to essentially generate JS code that does the following, and it seems to work without issue:
// Assuming no config option passed
var parent = document.querySelector("head");
if (parent) { parent.appendChild(linkTag); }
else { reject("Invalid parent element"); }
// If the user passes config option: { insertInto: ".style-container" }
var parent = document.querySelector(".style-container");
if (parent) { parent.appendChild(linkTag); }
else { reject("Invalid parent element"); }