Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
custom elements

11 Articles
{
,

}
Direct link to the article Making Calendars With Accessibility and Internationalization in Mind
custom elements i18n locales

Making Calendars With Accessibility and Internationalization in Mind

Doing a quick search here on CSS-Tricks shows just how many different ways there are to approach calendars. Some show how CSS Grid can create the layout efficiently. Some attempt to bring actual data into the mix. Some …

Avatar of Mads Stoumann
Mads Stoumann on Mar 13, 2023
Direct link to the article An Approach to Lazy Loading Custom Elements
custom elements lazy loading web components

An Approach to Lazy Loading Custom Elements

We’re fans of Custom Elements around here. Their design makes them particularly amenable to lazy loading, which can be a boon for performance.

Inspired by a colleague’s experiments, I recently set about writing a simple auto-loader: Whenever a custom …

Avatar of Frederik Dohr
Frederik Dohr on Feb 13, 2023
Direct link to the article Using Custom Elements in Svelte
custom elements svelte

Using Custom Elements in Svelte

Svelte fully supports custom elements (e.g. <my-component>) without any custom configuration or wrapper components and has a perfect score on Custom Elements Everywhere. However, there are still a few quirks you need to watch out for, especially around …

Avatar of Geoff Rich
Geoff Rich on Jun 22, 2021
Direct link to the article Creating Custom Form Controls with ElementInternals
custom elements ElementInternals forms

Creating Custom Form Controls with ElementInternals

Ever since the dawn of time, humanity has dreamed of having more control over form elements. OK, I might be overselling it a tiny bit, but creating or customizing form components has been a holy grail of front-end web development …

Avatar of Caleb Williams
Caleb Williams on Mar 24, 2021 (Updated on Jun 25, 2021)
Direct link to the article Web Components Are Easier Than You Think
custom elements web components

Web Components Are Easier Than You Think

When I’d go to a conference (when we were able to do such things) and see someone do a presentation on web components, I always thought it was pretty nifty (yes, apparently, I’m from 1950), but it always seemed complicated …

Avatar of John Rhea
John Rhea on Mar 8, 2021 (Updated on Feb 28, 2022)
Direct link to the article 3 Approaches to Integrate React with Custom Elements
custom elements react

3 Approaches to Integrate React with Custom Elements

In my role as a web developer who sits at the intersection of design and code, I am drawn to Web Components because of their portability. It makes sense: custom elements are fully-functional HTML elements that work in all modern …

Avatar of Caleb Williams
Caleb Williams on Jan 15, 2021
Direct link to the article Playing With (Fake) Container Queries With watched-box & resizeasaurus
container-queries custom elements

Playing With (Fake) Container Queries With watched-box & resizeasaurus

Heydon’s <watched-box> is a damn fantastic tool. It’s a custom element that essentially does container queries by way of class names that get added to the box based on size breakpoints that are calculated with ResizeObserver. It’s like a …

Avatar of Chris Coyier
Chris Coyier on May 4, 2020
Direct link to the article Toast
custom elements

Toast

One day, all the sudden, I started hearing jokes about toast. I had no idea what the context was. I assumed some friends just got started telling toast jokes, which isn’t rare by any means. But it turns out it …

Avatar of Chris Coyier
Chris Coyier on Jul 2, 2019
Direct link to the article Creating a Custom Element from Scratch
custom elements web components

Creating a Custom Element from Scratch

In the last article, we got our hands dirty with Web Components by creating an HTML template that is in the document but not rendered until we need it.

Next up, we’re going to continue our quest to create …

Avatar of Caleb Williams
Caleb Williams on Mar 20, 2019 (Updated on Aug 26, 2020)
Direct link to the article An Introduction to Web Components
custom elements HTML templates shadow dom web components

An Introduction to Web Components

Front-end development moves at a break-neck pace. This is made evident by the myriad articles, tutorials, and Twitter threads bemoaning the state of what once was a fairly simple tech stack. In this article, I’ll discuss why Web Components are …

Avatar of Caleb Williams
Caleb Williams on Mar 18, 2019 (Updated on Mar 22, 2019)
Direct link to the article A Guide to Custom Elements for React Developers
custom elements react web components

A Guide to Custom Elements for React Developers

I had to build a UI recently and (for the first time in a long while) I didn’t have the option of using React.js, which is my preferred solution for UI these days. So, I looked at what the built-in …

Avatar of Charles Peters
Charles Peters on Nov 8, 2018 (Updated on Nov 15, 2018)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Agency Coaching
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top