Select Page

Category: web components

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your site

Šime posts regular content for web developers on In this week’s roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site. Using plain text fields for date input Keyboard users prefer regular text fields over complex date pickers, and voice users are frustrated by the native control (). Previously, I have relied on plain text inputs as date fields with custom validation for the site, typically using the same logic on the client...

Read More

Reduced Motion Picture Technique, Take Two

Did you see that neat technique for using the element with to serve an animated image (or not) based on a prefers-reduced-motion media query? After we shared that in our newsletter, we got an interesting reply from Michael Gale: What about folks who love their animated GIFs, but just didn’t want the UI to be zooming all over the place? Are they now forced to make a choice between content and UI? I thought that was a pretty interesting question. Also, whenever I see these days, my brain is triggered into WELL WHAT ABOUT MP4?! territory, as I’ve been...

Read More

Making Web Components for Different Contexts

This article isn’t about how to build web components. Caleb Williams already wrote a comprehensive guide about that recently. Let’s talk about how to work with them, what to consider when making them, and how to embrace them in your projects. If you are new to web components, Caleb’s guide is a great read, but here are more resources that will get you up to speed: Web Components — the “right” way Shadow DOM v1: Self-Contained Web Components Web Components on MDN Awesome Web Components Open Web Component Recommendations Since web components are now widely supported (thanks to the...

Read More

Styling a Web Component

This confused me for a bit here so I’m writing it out while it’s fresh in mind. Just because you’re using a web component doesn’t mean the styles of it are entirely isolated. You might have content within a web component that is styled normally along with the rest of your website. Like this: See the Pen Web Component with Global Styles (because no Shadow DOM) by Chris Coyier (@chriscoyier) on CodePen. That element isolated the JavaScript-powered functionality of itself by attaching a click handler to the inside of it. But the styling of that button comes from global...

Read More