Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
custom elements

11 Articles
{
,

}
Image
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 …

Image
Mads Stoumann on Mar 13, 2023 Updated on May 17, 2024
Image
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 …

Image
Frederik Dohr on Feb 13, 2023
Image
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 …

Image
Geoff Rich on Jun 22, 2021
Image
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 …

Image
Caleb Williams on Mar 24, 2021 Updated on Jun 25, 2021
Image
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 …

Image
John Rhea on Mar 8, 2021 Updated on Feb 28, 2022
Image
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 …

Image
Caleb Williams on Jan 15, 2021
Image
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 …

Image
Chris Coyier on May 4, 2020
Image
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 …

Image
Chris Coyier on Jul 2, 2019
Image
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 …

Image
Caleb Williams on Mar 20, 2019 Updated on Aug 26, 2020
  • 1
  • 2
  • Older Image

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top
Advertisement