Okay, here's some more fun with CSS-only custom elements - layout components!

#html #css #webcomponents
https://dev.to/stuffbreaker/css-only-custom-elements-for-layouts-4kea

Lately, I've been exploring CSS-only custom elements. They're pretty rad!

#html #css #webcomponents
https://dev.to/stuffbreaker/css-only-custom-elements-go6

Why would someone use ElementInternals in an accordion web component?

Nothing like a lively conversation about whether links should be styled as buttons and vice versa.

#DesignSystems #WebDev

I had an interesting conversation the other day. There was a desire to make only colors adjustable for light and dark modes. The problem with that is that more than just colors need to be adjusted in those modes, like shadows, font weights, letter spacing, etc.

That's one reason I think the #CSS `light-dark()` function needs to be updated to handle more than just colors (and now image URLs).

#html #webdev #designsystems

@davatron5000 and @chriscoyier thanks for the shout-out on this week's episode of @shoptalkshow!

I'm happy to help out with #WebComponents DX where I can.

https://shoptalkshow.com/717/

If you're using the Custom JSDoc Tags plugin for your #WebComponents, you can now add them at the property level!

https://wc-toolkit.com/documentation/jsdoc-tags/#property-level-custom-tags

When I was at Microsoft, we were trying to find ways around some of the pain points of #WebComponents, so I did an exploration on what Declarative Custom Elements could potentially provide us.

#html #css #javascript
https://dev.to/stuffbreaker/how-declarative-custom-elements-dce-could-improve-web-components-53eg

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

#webcomponents #javascript

🌶️ HOT TAKE 🌶️

`aria-label` is not accessible because it doesn't support browser localization.

#a11y #l10n #i18n #webdev

Happy holidays! I thought I'd sneak in a little gift for everyone with the #WebComponents Language Server for Zed! Enjoy!

https://wc-toolkit.com/integrations/zed/

I hate that everything in #GitHub is called an "issue". Some of them are feature requests, proposals, or questions.

Web Components Language Server for Neovim!

✨ Zero-config LSP support for custom elements
🧠 Smart completions & diagnostics
♻️ Auto-restart on config changes
🔧 Works with HTML, Astro, Vue, Svelte, JSX & more

Try it out! 👇
https://wc-toolkit.com/integrations/neovim

#Neovim #WebComponents #DevTools

Hmmm... I may be rethinking my strategy with the #WebComponents Language Server. Writing it in Node requires it to be installed to use it or any of the extensions. That's kind of annoying for our #dotnet, #php, #java, #golang, #rust, and #ruby friends

For you #TypeScript devs out there that have learned #Rust, what resources have you found that helped you?

I absolutely love this! Thank you @getsentry and others for supporting #OpenSource!

https://opensourcepledge.com/

I've been having fun playing with the Ubuntu distros for a Linux desktop environment, but I found myself running the same scripts every time I set one up. So, I decided to create a script to simplify things for me. Let me know if you think I missed anything.

#wevdev #linux
https://github.com/break-stuff/punk_os

I'm excited to announce #AI integration for the #WebComponents Language Server!

If you are using a @vscode fork like @cursor.com or Windsurf, the extension provides a local, configurable #MCP server.

#html #css #javascript
https://wc-toolkit.com/integrations/web-components-language-server/#ai-integration

I'm very excited to announce the release of the #WebComponents CLI validator! Now you can validate your components in your build pipelines.

https://wc-toolkit.com/integrations/wctools/

Right now, it's a pretty basic implementation, but on the roadmap I have:

- Broad editor support (right now just @vscode)
- Build-time validation
- Framework type integration
- AI integration

https://wc-toolkit.com/integrations/web-components-language-server/