astro-island,astro-slot,astro-static-slot{display:contents} is injected in the body in both dev and production

[arihantverma]

Astro Info

Astro                    v4.12.2
Node                     v18.20.3
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/react
                         @astrojs/mdx

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

astro-island,astro-slot,astro-static-slot{display:contents} is injected in a style tag ( in this example inside the header tag )

Related closed, old issue for reference: #4298

What's the expected result?

astro-island,astro-slot,astro-static-slot{display:contents} shouldn't be injected in a style tag in the body

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-kmy4p3

Participation

• I am willing to submit a pull request for this issue.

[Princesseuh]

I'm not sure I understand, it's intended that this is in a style tag in the body, you would get worse performance if it was anywhere else.

As for the validity of it, there's.. long discussions on the subject (see whatwg/html#1605 ), but it is intended in the context of Astro at this time and supported by every browser.

Apologies if I missed something, the issue you linked has the style tag's content actually showing on the page, but this doesn't seem to be the case in your reproduction.

[arihantverma]

@Princesseuh you are right. I incorrectly understood the previous issue, the issue there was that the style tag was actually showing on the page, which is different from what I said.

At first, in the least, I was confused as to why a style tag with astro custom elements' selectors were injected in the first place. It just hit me right now why those styles are needed – display:contents to let css work in a way it should without astro- custom elements wrappers getting the way.

Something that I didn't share in the issue description was that my exact issue was that on android chrome. In the screenshot below, you can see that the first paragraph has a visually different font size, even though both paragraphs have font-size:16px. I thought that it had something to do with the styles injected, since removing astro-island {display: contents} fixed it.

But turns it out it isn't an astro issue. It's because of the button html element in the paragraph ( shown with the vanilla reproduction ).

Repro links (it is not an astro specific issue, I'm sharing an astro repro anyway, followed by a vanilla repro):

(open the following in android chrome):

Astro: https://stackblitz.com/edit/withastro-astro-6wgofr
Vanilla: https://codepen.io/arihantverma/full/zYVKYYo

A possible chromium bug because of which this issue arises: https://issues.chromium.org/issues/40484405

Closing this issue, since it's not an astro issue.

Thank you for taking out time to explain, appreciate it.