Plain string for <Link onload="..."> shows warning

I want to preload google fonts in the

root.tsx

root.tsx

like so:

            <Link 
              rel='preload'
              href="https://fonts.googleapis.com/..." 
              as='style'
              attr:onload="this.onload=null;this.rel='stylesheet'"
            />

            <Link 
              rel='preload'
              href="https://fonts.googleapis.com/..." 
              as='style'
              attr:onload="this.onload=null;this.rel='stylesheet'"
            />

yet, typescript can't seem to find that attribute, i.e.:

Type '{ rel: string; href: string; as: "style"; "attr:onload": string; }' is not assignable to type 'IntrinsicAttributes & LinkHTMLAttributes<HTMLLinkElement>'.
Property 'attr:onload' does not exist on type 'IntrinsicAttributes & LinkHTMLAttributes<HTMLLinkElement>'

How can I use

attr:

attr:

to make clear I want to set my attribute as plain text?

Original message was deleted

BersaelorOP•8/31/23, 7:08 AM

mhmm so maybe typescript doesn't understand

attr:

attr:

? Because it still says that

BersaelorOP•8/31/23, 7:14 AM

ah, interesting, i didn't know that

BersaelorOP•8/31/23, 7:19 AM

mhmm, I mean I guess solid-js expects the onload to be a handler, i.e.

but that didn't work for me

BersaelorOP•8/31/23, 7:20 AM

BersaelorOP•8/31/23, 7:21 AM

i just copied this code from somewhere when I added preloading to the fonds,

BersaelorOP•8/31/23, 7:24 AM

mhmm, so it says , but I think thats exactly want I want?

BersaelorOP•8/31/23, 7:24 AM

the should be the attribute in question

BersaelorOP•8/31/23, 7:24 AM

i.e. I want the container to shadow the outer (which would be the root.tsx , right?)

BersaelorOP•8/31/23, 7:26 AM

so, this seems to be a comment structure:

when using a preload-link

BersaelorOP•8/31/23, 7:26 AM

first the is and when it finishes loading it is changed to

BersaelorOP•8/31/23, 7:29 AM

https://web.dev/defer-non-critical-css/

web.dev

Defer non-critical CSS

Learn how to defer non-critical CSS with the goal of optimizing the Critical Rendering Path, and improving FCP (First Contentful Paint).

BersaelorOP•8/31/23, 7:32 AM

With this information, optimize your CSS so that the browser starts processing critical styles immediately after page loads, while deferring non-critical CSS for later:

but as they also said

In this guide, you used vanilla code to implement this optimization. In a real production scenario, it's a good practice to use functions like loadCSS, that can encapsulate this behavior and work well across browsers, and can support a Content Security Policy that may not allow inline onload JavaScript.

BersaelorOP•8/31/23, 7:34 AM

loading fonts from googlefonts in a blocking way adds extra blocking 600ms - 1000ms on mobiles devices for first page load

BersaelorOP•8/31/23, 7:36 AM

would we still get into trouble with CSP's using ?

BersaelorOP•8/31/23, 7:37 AM

noice, thank you for reminding me of

BersaelorOP•8/31/23, 7:38 AM

int he example they do
would that also remove the handler in solid ?

BersaelorOP•8/31/23, 7:39 AM

i mean it seems to work in , let's see hwta happens if I deploy and SSR it

BersaelorOP•8/31/23, 7:39 AM

I can also see it changing when I have the devtools open and look at the lines while refreshing

BersaelorOP•8/31/23, 7:40 AM

thats not my IDE, thats chrome devtools

BersaelorOP•8/31/23, 7:40 AM

screenshot of it working (on localhost)

BersaelorOP•8/31/23, 7:41 AM

so this is the code:

BersaelorOP•8/31/23, 7:41 AM

and this is what the result looks like in chrome

Original message was deleted

BersaelorOP•8/31/23, 7:42 AM

yup https://start.solidjs.com/api/Link

SolidStart Beta Documentation

Early release documentation and resources for SolidStart Beta

BersaelorOP•8/31/23, 7:43 AM

i'm not sure how that works in solid

BersaelorOP•8/31/23, 7:43 AM

same result

BersaelorOP•8/31/23, 7:46 AM

I could try adding a ref and adding an observer in . But wouldn't that be super verbose for that one-liner?

BersaelorOP•8/31/23, 7:47 AM

i see, well you told me and the tutorial above said so, so you two are probably right

BersaelorOP•8/31/23, 7:49 AM

pretty sure that is the reason why Safari doesn't swicth from to

BersaelorOP•8/31/23, 8:24 AM

the rel attribute is not switched on safari

BersaelorOP•8/31/23, 8:24 AM

but seems to work too, let's see what https://pagespeed.web.dev says when I deploy that

BersaelorOP•8/31/23, 9:24 AM

yup, seems that fixed it too (pagespeed.web.dev no longer complains about blocking font loads)

Original message was deleted

BersaelorOP•9/4/23, 12:12 PM

nope, sorry just saw this question, not doing any pushing