Rogin Farrer

We’re currently using Mustache, and we have a PHP compiler for it on the server and a JS compiler on the client. You only really need a string of HTML, and you can configure your JS bundler to create a loader for your template files.

Is the public api React/Svelte components, each which render a web component with declarative shadow DOM?

A new way to style gaps in CSS  |  Blog  |  Chrome for Developers Say goodbye to border and pseudo-element hacks.

Say goodbye to border and pseudo-element hacks, and hello to CSS gap decorations!

developer.chrome.com/blog/gap-dec...

JSX Types Generator Generate JSX types for custom elements / web components

🚀 Excited about @wc-toolkit's JSX Types Generator!

Generate complete #TypeScript type definitions for your #WebComponents in JSX frameworks like @react.dev 19+, @preactjs.com, and @stenciljs.com.

✨ Autocomplete
📝 Inline documentation
🛡️ Type validation
🔄 Event typing

wc-toolkit.com/integrations...

Was that ever a requirement/consideration for the previous React library?

Curious about SSR and if that ever came up as a requirement. It’s been a critical requirement in my experience in web and e-commerce, so I’m a bit surprised that it’s all client-side Preact. Though my assumption could be wrong!

Also not using Lit styles. (We're maintaining our own server integrations for injecting DSD and styles.) Is the async batching part of the prop/attr bookkeeping? What Lit does for that is great, but I'm thinking about whether a different implementation without asynchronicity would be better for us

I’ve had to create our own version of “updateComplete” and “firstUpdated” since the shadow DOM or light DOM weren’t necessarily available/ready when we expected.

@justinfagnani.com I’ve been using Lit’s base ReactiveElement, without a “render” method, since we’re inserting the shadow template externally, and updating it imperatively. Curious if you think this makes ReactiveElement overkill? We use it for the “update” methods and syncing props & attrs.

Are your tokens currently published without any kind of build step? Just static files that are published directly?

It does feel a little funny to capture operations on colors, but I feel like it’s pretty common to do so in type-scales or spacing scales.

Could that darkened color be tokenized as a hex code?

Interviewer: Can you explain this gap in your resume?

Me, a software engineer: I suspect it's CSS margin collapse. I'd update to use flex and justify-content:space-evenly but I know you recruiters trust Outlook as a renderer.

Idk, I think you could say the same for React effects

Should there be a “strict mode” for web components that calls connectedCallback twice in DEV mode to catch bugs? 🤔

What are some of the most wrong ones?

Not with Preact, but with Preact as a consumer

You don't specify the required props for JSX/React, right? If I used `glide-core-dropdown` in a React app, there wouldn't be any TS support for the unique attributes?

I didn't think too much about this until configuring the types for a web component to be used in React. When I made certain attributes required, I realized that no other elements require HTML attributes, and never provide type errors.

Do you author web components with "required" attributes? The convention for most HTML elements is that no attributes are required. But in the context of a design system, it would be nice to require configuration for a custom element. Like a variant attribute for a badge or a button.

There are some downsides. Like CLS once JS runs. And arguably that timestamp isn’t legible to many non-technical users.

Ideally the server could provide a more legible format.

I know it’s meant to be an example of a point, and there are a lot of good cases to use this strategy.

hello, world

Say I have a web component (built with Lit) with a property "styleType", and its corresponding attribute is "style-type". Using conventional strategies for adding web component types to JSX, TS will autocomplete "styleType". But the correct attribute would be "style-type".

Has anyone solved this?

Have you had any problems with misuse? Like custom styles applied to the input or other anything else unexpected?

Does anyone here really use Signal as a daily, normal messaging app, like with friends and family? I don’t know anyone that uses it, except for some who use it for work in politics.

I feel like I hear about it so much, and I’ve had it for years, but have never once used it.

You should know this before choosing Next.js Picking the technology stack for a project is an important and consequential decision. In the enterprise space in particular, it often involves a multi-year commitment with long-lasting implications o...

“If WordPress had a privileged code path that was only accessible to sites deployed to Automattic properties, would it be trusted as a truly open project and would it have the dominance it has today?”

Damning, thorough write up by @eduardoboucas.com

eduardoboucas.com/posts/2025-0...

How to use Web Components with TypeScript and React Learn how to use Web Components with TSX TypeScript and React components.

This might help! There are some steps required to let TS know what your elements are and what their events/props are coryrylan.com/blog/how-to-...

What makes them a drag?

Would love to hear what the design system looks like! Is the library primarily composed of Lit components? How much do developers just use CSS classes on their own markup?

My team is investigating using web components, but we're very server-driven. So I'm very curious what other folks are doing.

Just to clarify, today you'd choose to provide an API where a developer had to put add a <input /> as a child of the custom element? ie

<ds-input>
<input />
</ds-input>

Or you'd make the component render its own input in a shadow root?

Thanks to the great feedback, I started playing around with a custom element providing these public methods to be used for unit testing. I wrote them to be as similar to `@testing-library/user-event` as possible. Instead of

await userEvent.type(input, 'hello');

you write

await input.type('hello')