Are teams using #TypeScript 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.
Fun-loving coder and speaker. I love #webdevelopment, #webcomponents, and #designsystems. Creator of the WC Toolkit. I work at ZocDoc.
Are teams using #TypeScript 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.
@keithamus @Lukew I didn't know that. I'll have to check it out.
@Lukew thanks a lot! 😆
It may be a process detail for component authors and the files they reference in the CEM.
@Lukew That might be cleaner. How will the language server know which to choose?
...or do we need anything? Standard HTML doesn't do anything.
@Lukew would it be useful even if it's uglified?
@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?
When you are in an #html 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
🚀 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:
https://e18e.dev/blog/the-year-ahead-2026.html#sponsored-by-google-chrome
I also created a demo site showcasing each of the solutions.
https://break-stuff.github.io/ce-fouc-demo
I updated my article on reducing #WebComponent FOUC to include details on how to choose an appropriate timeout.
#html #css #javascript
https://dev.to/stuffbreaker/reducing-fouc-with-web-components-1jnh
@westbrook oh, I love that!
@westbrook what does it do?
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.
https://dev.to/stuffbreaker/reducing-fouc-with-web-components-1jnh
I've been having fun with improving this FOUC solution for #WebComponents. Thank you, everyone, for the feedback!
I've improved upon it.
@dutchcelt thanks! I would be very interested to see what you find.
@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.
@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.
@Krazov You were actually partially correct. In an attempt to simplify my original solution, I broke it. Here is the correct implementation.
Sorry! I made a mistake in the snippet above and was getting false results. Here is the corrected snippet.