feat: make position of <style> tags configurable in hydrateDocument() #5915
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already include this feature request, without success.
Describe the Feature Request
It would be helpful if hydrateDocument() could be configured as to where generated inline <style> tags will be placed.
Describe the Use Case
When the document is hydrated, the inline <style> tags created for the Stencil components are placed at the top of the <head> section. This placement can delay the loading of <link> tags, such as those with a rel="preconnect" value, which are crucial for performance optimization. Ideally, the placement of these styles should be configurable to avoid such issues.
Sample input:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://some-url.com" />
</head>
<body>
<my-component></my-component>
</body>
</html>Output:
<!doctype html>
<html lang="en" data-stencil-build="vuogzrh7" class="hydrated">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style sty-id="sc-my-component">
/*!@:host*/
.sc-my-component-h {
display: inline-block;
border: 1px solid red;
padding: 5px;
}
</style>
<link rel="preconnect" href="https://some-url.com" />
</head>
<body>
<my-component class="sc-my-component-h hydrated" s-id="1"
><!--r.1-->
<div class="sc-my-component" c-id="1.0.0.0">
<!--t.1.1.1.0-->My Component
</div></my-component
>
</body>
</html>Describe Preferred Solution
Make hydrateDocument() configurable as to where generated style tags are placed.
Describe Alternatives
No response
Related Code
A well-documented reproduction of the use-case/issue can be found here:
https://github.com/mhoritani/stencil-repro-072024
Additional Information
No response