Burton Smith

I also created a new demo site to showcase each of the solutions:
break-stuff.github.io/ce-fouc-demo

Reducing FOUC with Web Components Learn practical techniques for reducing the flash of unstyled content (FOUC) as your web components/custom elements are defined to improve your users' experience

I updated my article on reducing #WebComponent FOUC to include details on how to choose an appropriate timeout.

#html #css #javascript
dev.to/stuffbreaker...

I think it's needed for isolating things like credit card information, but you should be able to do OAuth without it.

That's a cool idea! What's the iframe for?

Wild how far you can push "customizable select" with just #CSS

nerdy.dev/nice-select

One of things I love about it is that there are lots of different ways to author web components and the CEM acts as a translation layer for tooling and integrations.

I may have heard something about it... 😏

I think we need a better tool.

There's definitely a place for SSRed web components, but I think trying to solve it with DSD is the wrong tool for the job most of the time.

- it requires special setup for each framework
- tools for it often restrict the APIs you can use
- it significantly bloats the DOM once it's rendered

Congratulations, fellas! That's an amazing achievement! I love listening in every week.

+1 for declarative custom elements

Finally solving the tooltip arrow usecase with a new CSS property called border-shape

⚠️ WIP early-stage API, timeline TBD, more info coming soon

But it brings a lil tear to my eye to see this working, border & all 🥲

This demo uses anchored container queries + border-shape + a little animation

TIL, Chrome 144 ships some new pseudo-classes. 👏

Within limits, you can now style the matching strings of the "find in page" search.

::search-text {
// matching strings
}

::search-text:current {
// currently matched string
}

More on the blog. 👇

www.stefanjudis.com/today-i-lear...

That was arbitrary. You can set it to anything. My example tends to load faster than the timeout, but I have a very fast network.

Yeah, that feels really heavy-handed when most design system use-cases can be improved with 9 lines of CSS.

To be honest, I think a better solution is needed.

I'm on board with most of this. I see a couple of potential issues with your slots argument:

- Performance could be an issue
- Styling slotted content will be unpredictable
- What happens if you have nested components that use the same slot name?

Yeah, unfortunately using declarative shadow DOM as an SSR solution is a pretty ugly hack and overkill in many web components use-cases.

I would be interested to read that. I personally really like web components, but would like to understand where you see friction points.

I think this is an area where declarative custom elements would be a massive win.

Yep! Any time you render with JavaScript you end up with it. Even frameworks have it. 🤷‍♂️

So, like a reverse FOUC? Do you still have hidden things when these things are shown?

Ah, I see. Shouldn't everything show after the timeout?

I could see something like this working well with components that are loaded after the initial page loads.

There are a few challenges with these approaches:

- these are at the individual component level which will result in layout shifts as they are defined and painted
- these are fading in rather than appearing which will negatively affect the core web vitals score

Good question! To handle something like that, I would imagine you would need an indicator on your components that they have completed loading.

Reducing FOUC with Web Components Learn practical techniques for reducing the flash of unstyled content (FOUC) as your web components/custom elements are defined to improve your users' experience

I've had a lot of questions about it, so I wrote up a quick explainer on different ways to reduce FOUC with web components.

dev.to/stuffbreaker...

body:has(:not(:defined)) { opacity: var(--wc-loaded, 0); animation: showBody 0s linear 100ms forwards; } @keyframes showBody { to { --wc-loaded: 1; } }

I've been having fun with improving this FOUC solution for #WebComponents. Thank you, everyone, for the feedback!

I've improved upon it.

Can you explain more about your hidden state override?

Do You Need to SSR Your Web Components? Many front-end frameworks use server-side rendering to improve their app's performance, but do web components need to be SSRed?

My components use JS, but I was looking for a CSS way to reduce FOUC. In an article I posted a while back, I showed how this can be handled using JS, but I was looking for more performant ways to handle the problem.

dev.to/stuffbreaker...