Advanced Usage - Shortcodes, inject style into head

How could I go about including some of the output from my shortcode into the <Head>

I created an imghover shortcode that works without any javascript by using CSS, when you mouse over an image it displays the image you are comparing with (there are lot of uses for such a function, ESPECIALLY in photography and video editing):

As you can see this shortcode works properly, but the problem is that for my content security policy I had to set style-src 'self' 'unsafe-inline'

If there was a way for my shortcode to push some of its code into the <Head> then unsafe-inline could be avoided.

There are other uses for this as well, if you check google lighthouse, you will see that for the pages with vimeo or youtube embeds they get a bad score. A Facade can be used and you get a perfect score, I tested them locally and they work great, but I only want to load those javascript facade sources in the head on pages where my yt or vm shortcodes are used (youtube and vimeo)

So this is another instance where a way to write into the head from a shortcode would be useful, although in this case if you had multiple videos embeded on a single page, you would want to only do the include in the head one time.

Youtube Facade:

Vimeo Facade:

Appreciate any and all thought on this! Maybe there is a way to do it that I have not thought of.


As mentioned in the GH issue, the only way to make it work is through JS.