Doug Gibson
@dgibson.bsky.social
Front-end/design systems engineer (web components, a11y, CSS, JS; former full-stack/ColdFusion developer), metalhead, geek, father.
Devs should be included in it though. I see a lot of issues that come from design centric decisions that don't consider the native platform, including naming of things.
September 7, 2025 at 9:23 PM
Devs should be included in it though. I see a lot of issues that come from design centric decisions that don't consider the native platform, including naming of things.
How long ago? I wrote one with aria-activedescendant and tested it (just recently) across all screen readers and browsers and platforms and it seemed to work fine in Safari.
August 22, 2025 at 9:29 PM
How long ago? I wrote one with aria-activedescendant and tested it (just recently) across all screen readers and browsers and platforms and it seemed to work fine in Safari.
Been there. I learned 2 things from this experience:
I really needed to up my attention to detail to reduce this because designers will notice all those things.
But also I needed a detailed spec sheet that spelled things out visually as well as proper requirements. A picture != requirements.
I really needed to up my attention to detail to reduce this because designers will notice all those things.
But also I needed a detailed spec sheet that spelled things out visually as well as proper requirements. A picture != requirements.
August 8, 2025 at 8:05 PM
Been there. I learned 2 things from this experience:
I really needed to up my attention to detail to reduce this because designers will notice all those things.
But also I needed a detailed spec sheet that spelled things out visually as well as proper requirements. A picture != requirements.
I really needed to up my attention to detail to reduce this because designers will notice all those things.
But also I needed a detailed spec sheet that spelled things out visually as well as proper requirements. A picture != requirements.
I don't use shadow dom so my components set their public variables in :root. The part about not overriding them with selectors deeper than the host (wc selector) still applies because of how I write my css though. It took a while to fully work through and understand that part.
July 6, 2025 at 1:13 PM
I don't use shadow dom so my components set their public variables in :root. The part about not overriding them with selectors deeper than the host (wc selector) still applies because of how I write my css though. It took a while to fully work through and understand that part.
I think I may have it handled already with a @watch (this is stencil) on the value prop that sets the child selected states.
June 19, 2025 at 4:16 PM
I think I may have it handled already with a @watch (this is stencil) on the value prop that sets the child selected states.
Honestly I haven't dealt with a form reset in quite a while. I'll have to consider the impacts on some of my components. Good point. I tend to slot the native controls so most just work. But there's always some like dropdowns...
June 19, 2025 at 4:14 PM
Honestly I haven't dealt with a form reset in quite a while. I'll have to consider the impacts on some of my components. Good point. I tend to slot the native controls so most just work. But there's always some like dropdowns...
I would use the attribute selector because unlike the native element, you would likely manage this prop like a state based on user interaction. Web components should be reactive to work with modern frameworks, so this behavior fits the paradigm better.
June 18, 2025 at 7:48 PM
I would use the attribute selector because unlike the native element, you would likely manage this prop like a state based on user interaction. Web components should be reactive to work with modern frameworks, so this behavior fits the paradigm better.
Maybe you're saying the same thing but I've seen some storybooks that have dozens of stories for a component, most of which are just a control toggle away.
June 14, 2025 at 10:31 PM
Maybe you're saying the same thing but I've seen some storybooks that have dozens of stories for a component, most of which are just a control toggle away.
In some cases I think the control is enough vs separate stories. If my button has 3 fills and 3 colors (conservatively), I don't really need 9 stories to represent them. I use individual stories when there's complexity or different implementation necessities (e.g., complex slotted content).
June 14, 2025 at 10:30 PM
In some cases I think the control is enough vs separate stories. If my button has 3 fills and 3 colors (conservatively), I don't really need 9 stories to represent them. I use individual stories when there's complexity or different implementation necessities (e.g., complex slotted content).
I have been using stencil for 7 years on 2 design systems/ 3 major releases. I've never written a component from scratch but it sounds horrible 😀.
June 14, 2025 at 10:19 PM
I have been using stencil for 7 years on 2 design systems/ 3 major releases. I've never written a component from scratch but it sounds horrible 😀.
I use stencil and it uses jsx, which I like. That and the polyfilled slots makes it hard to move to something else.
May 24, 2025 at 1:01 AM
I use stencil and it uses jsx, which I like. That and the polyfilled slots makes it hard to move to something else.
I didn't know you could use jsx with lit. Is that out of the box?
May 23, 2025 at 5:16 PM
I didn't know you could use jsx with lit. Is that out of the box?
Sounds like you should check out stencil to build your components - it's the best of both worlds.
May 21, 2025 at 1:09 AM
Sounds like you should check out stencil to build your components - it's the best of both worlds.
Has it? I don't think it did.
May 7, 2025 at 2:03 AM
Has it? I don't think it did.
That solid foundation is a big investment, but hopefully worth it in the end.
May 6, 2025 at 7:54 PM
That solid foundation is a big investment, but hopefully worth it in the end.
I'll try to start up a new project and see what's up. I'm stuck on a previous version on my work project for reasons... You are doing a web components project, not stencil app, correct?
May 6, 2025 at 7:53 PM
I'll try to start up a new project and see what's up. I'm stuck on a previous version on my work project for reasons... You are doing a web components project, not stencil app, correct?
I've been in stencil-land for too long to notice. I have my own gripes there, but was just reading the FAST docs the other day and feel you there.
May 6, 2025 at 7:47 PM
I've been in stencil-land for too long to notice. I have my own gripes there, but was just reading the FAST docs the other day and feel you there.
Identifying what's a web component from a pattern made up of web components isn't trivial. In my first design system, we made components that did too much or were overly complex. Only after supporting those did we realize how and why to focus on building blocks and reuse more.
May 6, 2025 at 7:41 PM
Identifying what's a web component from a pattern made up of web components isn't trivial. In my first design system, we made components that did too much or were overly complex. Only after supporting those did we realize how and why to focus on building blocks and reuse more.
This was my first thought as well. Using a CSS API for customizing components has so many benefits. I've been planning to write an article on it but never got around to it.
April 30, 2025 at 10:30 PM
This was my first thought as well. Using a CSS API for customizing components has so many benefits. I've been planning to write an article on it but never got around to it.
Very rarely. Stencil does support required props, but in most cases I find setting a default value that can be overridden makes more sense.
April 26, 2025 at 8:34 PM
Very rarely. Stencil does support required props, but in most cases I find setting a default value that can be overridden makes more sense.
Example: I am using display flex on a button to make text and icons align vertically centered. If I specify a gap, this also works as if the text node was a proper flex child. I thought the text would have to be in a span for that to work.
April 25, 2025 at 2:08 PM
Example: I am using display flex on a button to make text and icons align vertically centered. If I specify a gap, this also works as if the text node was a proper flex child. I thought the text would have to be in a span for that to work.
In the css/scss file for the component.
April 9, 2025 at 11:48 PM
In the css/scss file for the component.