Webstudio
Log in

Join the Webstudio community

Updated 6 days ago

Why can't I add an HTML Embed in Head Slot anymore?

vviniciusmoreira.me
·
My goal is to add a <script> or <style> tag in the <head> of one page. When working on a project at the beginning of this week, I was able to add an HTML embed inside the Head Slot. Now, using it today, I'm unable to do this. And when I add this previous Head Slot that has an embed inside in another page/project, I get this error (image)

As far as I know, this was the way to add <style> and <script> tags for a specific page, and I was able to do that, but something recent has changed
Attachment
image.png
2
B
v
M
25 comments
BBogdan
I don't think HeadSlot ever did anything to html embed. It was just rendered as if you put it after head slot. Now we are just more explicit about unexpected components.
BBogdan
HeadSlot works only for these three components
Attachment
image.png
vviniciusmoreira.me
Thanks for the quick response, Bogdan

I was able to add it before, and not long ago
Attachment
image.png
vviniciusmoreira.me
Also, wasn't the purpose of the Head Slot to add things to the head at a page level? If so, shouldn't support all these things (image)?
Attachment
image.png
MMikeoxygen
Add it in the custom code section
BBogdan
Yes, I mean it wasn't renderered in the <head> in the end. Head Slot is basically a grouping for Title, Meta and Link which do the rendering.
MMikeoxygen
In your project settings
vviniciusmoreira.me
this will apply to all pages, not only one. I just want specific pages
BBogdan
Only few things for now, not all of them
BBogdan
You can add html embed at start of body
vviniciusmoreira.me
I thought it was 🥲
vviniciusmoreira.me
Will this be possible in the near future?
vviniciusmoreira.me
I know, but it isn't the same thing
BBogdan
Why do you think so?
vviniciusmoreira.me
because elements in the <head> load and execute before the DOM begins rendering
BBogdan
Well, actually browsers don't care unless you put some blocking script before your embed.
vviniciusmoreira.me
My case is I want to add a light/dark theme toggle. Even though I could just add this in the project settings, I wanted to do it in specific pages. For this, I thought Head Slot would help.
BBogdan
<style> and <script> are "blocking" so you shouldn't see the difference if you put it in the body
vviniciusmoreira.me
The goal is to get this JS working as fast as possible
vviniciusmoreira.me
maybe so, but idk. It just feels weird since it's not what a typical webpage structure should look like
vviniciusmoreira.me
but anyway, thanks for the heads up about the Head Slot rendering info
BBogdan
The difference between <head> and <body> is purely semantical. Browsers are smart enough to get everything they need ahead before any rendering. Maybe weird but shouldn't limit your from implementing stuff.
IIgor Couto
The use-case I was thinking of is when we want to create structured data markup in the <head> — it should go inside a <script> element there. While the structured data can be placed in the <body>, placing it in the <head> optimises it for search engine crawling.
BBogdan
placing it in the <head> optimises it for search engine crawling
Do you have any evidence? Crawlers parse whole page to extract the data. Semantic html is important to structure raw text while here ld-json already explictly marked no matter where it is placed. The real difference can make dynamically injected content with javascript which requires crawlers to run the browsers which is much more expensive operation.
JJeremy
@Igor Couto As far as I'm aware, Google accepts the structured data in the head or body.

https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data#supported-formats
Add a reply
Sign up and join the conversation on Discord