[✨] Ability to set head tags on the component level

[n4bb12]

Is your feature request related to a problem?

I think it would be a useful developer experience and code organization improvement to be able to specify head tags on the component level, not just on the page / layout level.

The desired head tags are not always known upfront or might depend on what components are going to be used on the page. Currently, full knowledge of the component tree is required to be able to make those decisions on the page level in all cases.

Example use cases:

• You're using a non-Qwik component (for example a web component) that requires loading additional JS/CSS files in order to work. You want to be able to reference those assets only if the component gets rendered that needs them.

• You'd like to set preconnect links for external assets used by a single component. For example, I have an above-the-fold lite youtube embed that preconnects to i.ytimg.com for faster download of the thumbnail image.

Describe the solution you'd like

I'm not really in favor of any particular solution, but some options I can think of:

• A Head component like in similar frameworks
• Being able to export a head object/function from all components, in addition to pages

Describe alternatives you've considered

You can always maintain all potentially needed head tags on the page level. The downside with that is that it tears apart things that are closely related, and is error-prone, or you might be setting tags that end up not being necessary.

Alternatively, head tags can be inserted the old-fashioned way using vanilla JS (document.head.appendChild inside a client effect...). That's a little more cumbersome than if we had a built-in way. Also, I'm not sure if it's safe to do this in combination with how Qwik renders.