Select Page

Category: web components

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
www.000webhost.com