Burton Smith

Fun-loving coder and speaker. I love , , and . Creator of the WC Toolkit. I work at ZocDoc.

Burton Smithstuffbreaker
2026-02-12

Are teams using declaration maps to provide a better go-to-definition experience for developers?

I've used source maps, but I don't think I've provided declaration maps.

Burton Smithstuffbreaker
2026-02-11

@keithamus @Lukew I didn't know that. I'll have to check it out.

Burton Smithstuffbreaker
2026-02-11

@Lukew thanks a lot! 😆

It may be a process detail for component authors and the files they reference in the CEM.

Burton Smithstuffbreaker
2026-02-11

@Lukew That might be cleaner. How will the language server know which to choose?

Burton Smithstuffbreaker
2026-02-11

...or do we need anything? Standard HTML doesn't do anything.

Burton Smithstuffbreaker
2026-02-11

@Lukew would it be useful even if it's uglified?

Burton Smithstuffbreaker
2026-02-11

@mattesilver what aboiut for a component library? I think it goes to the type definition, but would that be the best solution for custom elements?

Burton Smithstuffbreaker
2026-02-11

When you are in an file, and you want to go-to-definition for a custom element, what do you think the behavior should be? Should it go to:

- type definition
- JS file where the class is defined
- CEM entry
- something else

Burton Smith boosted:
2026-02-10

🚀 Big news: We’re now sponsored by the Google Chrome team through the Chrome Performance Fund!

Together, we’re advancing web performance and modern tooling—integrating Baseline + Web Features into our next module-replacements release to deliver smarter, environment-aware suggestions. Huge thanks for the support 🙏

read more here:
e18e.dev/blog/the-year-ahead-2

Burton Smithstuffbreaker
2026-02-08

I also created a demo site showcasing each of the solutions.
break-stuff.github.io/ce-fouc-

Burton Smithstuffbreaker
2026-02-08

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


dev.to/stuffbreaker/reducing-f

Burton Smithstuffbreaker
2026-02-02

@westbrook oh, I love that!

Burton Smithstuffbreaker
2026-02-02

@westbrook what does it do?

Burton Smithstuffbreaker
2026-02-01

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/reducing-f

Burton Smithstuffbreaker
2026-02-01

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

I've improved upon it.

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

@keyframes showBody {
  to {
    --wc-loaded: 1;
  }
}
Burton Smithstuffbreaker
2026-01-31

@dutchcelt thanks! I would be very interested to see what you find.

Burton Smithstuffbreaker
2026-01-31

@dutchcelt that's a really cool idea. I think there may be a few issues with that.

- It delays the rendering of the entire page, but opacity will allow for rendering of other content to start before the components are defined
- I believe it will prevent assistive technologies from accessing the page's content while hidden.

Burton Smithstuffbreaker
2026-01-30

@mrplastik if you do it on the individual components you end up with layout shifts as the components define and apply their styles. Globally applying the styles allow the definition and initial paint to happen without the user having to watch the content shift around.

Burton Smithstuffbreaker
2026-01-30

@Krazov You were actually partially correct. In an attempt to simplify my original solution, I broke it. Here is the correct implementation.

body:has(:not(:defined)) {
  opacity: 0;
  animation: showBody 0s linear 100ms forwards;
}
@keyframes showBody {
  to {
    opacity: 1;
  }
}
Burton Smithstuffbreaker
2026-01-30

Sorry! I made a mistake in the snippet above and was getting false results. Here is the corrected snippet.

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

Client Info

Server: https://mastodon.social
Version: 2025.07
Repository: https://github.com/cyevgeniy/lmst