WebComponents

Chris Haynes - web developer consultant

Expand custom elements outside the browser.

Why I think it’s worth approaching declarative custom elements the same way CSS solved stylings for HTML.

How (and why) to use shadow DOM, now that the declarative syntax is here.

Reactive Components without compiling or VDOM Overhead? Say hello to LitElement.

You don't need a fancy framework or complicated tools to design components and build apps, you just need your web browser!

A step by step guide on how to factor a modern, component-based app using web standards

Igalia is an open source consultancy specialised in the development of innovative projects and solutions. Our engineers have expertise in a wide range of technological areas, including browsers and client-side web technologies, graphics pipeline, compilers and virtual machines. We have the most WPE, WebKit, Chromium/Blink and Firefox expertise found in the consulting business, including many reviewers and committers. Igalia designs, develops, customises and optimises GNU/Linux-based solutions for companies across the globe. Our work and contributions are present in many projects such as GStreamer, Mesa 3D, WebKit, Chromium, etc.

Every day a new JavaScript library is born, every week a new framework arrives and every month a front-end developer needs to rewrite a date picker 😢 LIT is a modern library for creating component libraries, design systems but also sites and apps. LIT components are web components and as such work anywhere you use HTML.

The year 2024 might be a big one for web components. I just started out with learning about them in a deeper level. In this article, some of the basics and lingo.

The idea of using custom elements to compose views on the server is quite nice.

Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks.…

Put all the boilerplatey junk in a base class.

Can we build an accessible, reusable, customizable tooltip using web components? Let's find out!

Building accessible tabs using web components.

Assorted thoughts on shadow DOM, div soups, and a cursed CSS idea.

How/where do you call `customElements.define`?

Why starting off with styling the Shadow DOM usually indicates a misunderstanding of its purpose.

Web components are kind of having a moment right now. And as part of that, shadow DOM is having a bit of a moment too. Or it would, except that much of the conversation seems to be about why you sh…

I’ve worked with Web Components a little bit over the last few, but really struggled to understand the use case for them. Until this week. Between Jeremy Keith’s article on HTML Web Components, plus using one for a client project with NASA, something just clicked in my brain finally. I’m now convinced that they’re the best way to author DOM manipulation libraries. Over the last few days, I converted half a dozen old JS libraries of mine to Web Components.

Declarative HTML library for native web components

What is style encapsulation and how you can you achieve it without the Shadow DOM?

Web Components specifications. Contribute to WICG/webcomponents development by creating an account on GitHub.

I'm still getting used to this

Web Components constitute a set of web technologies that enable the creation of reusable and customizable elements for user interfaces. In this article, we will specifically explore Web Components written in vanilla JavaScript, without relying on any additional framework or library.

Did I make this just for the custom name? Maybe!