Wait, what's the difference between :host, :host(), and :host-context()?!

There are three different, yet similar selectors available in web components, :host, :host(), and :host-context(). Let's look at the difference between them.

Refactoring a scroll-driven animation from JavaScript to CSS

Cut down on the amount of JavaScript you ship by refactoring a scroll-linked animation from JavaScript to CSS.

Convince Your Boss

Convince your boss that Component Odyssey is a worthy investment in your and your team’s development.

The Dilemmas You'll Face When Creating a Component Library

Building a component library can be complicated, let's explore some of the dilemmas you'll face when creating one.

Using Heaps of Cutting Edge CSS Features to Build a Progress Indicator

Learn how to use cutting edge CSS features like animation-timeline, color-mix, and trigonometric functions to build a sleek progress indicator.

autosize-textarea Web Component

A quick and simple HTML web component to give your textareas the ability to grow with its value.

Navigating Your Component Journey with Component Odyssey

There are dozens reasons to build a component library, but it's not an easy task. Component Odyssey will help you navigate your component library journey.

Gather User Feedback On Any Website with Hermes WC

Nothing is more valuable than direct feedback from your users. Hermes WC is an open source package built on web component that offers you a quick and easy way to learn what your users are thinking.

Writing Components That Work In Any Frontend Framework

Web components let developers write interoperable components, but at the cost of lots of boilerplate. Learn how you can write components that work in Svelte, Vue, React, and other frameworks, with minimal boilerplate.

Introducing Sandpack Lit: The Universal CodeSandbox

Learn how you can run entire web applications within your own web apps, regardless of whether you're using Svelte, Vue, React, or any other JavaScript framework