Introduction

Every web developer has struggled with dropdown menus, carousels, and UI components that seem deceptively simple. But what if these patterns could be built natively with ease? At Google I/O 2025, Una Kravets showed us exactly how the latest updates in HTML and CSS are redefining what’s possible. Web UI has undergone a significant transformation, with new technologies making interfaces more powerful and accessible. This article explores three key innovations: the evolution of the dialog vs. popover that enables us to build a customizable select menu from scratch, the introduction of a native scroll component, and a new hover card feature that is closely related to the new world of popovers.

1. New Dialog vs. Popover

Let’s start with something surprisingly powerful: dialogs and popovers without a single line of JavaScript. Thanks to the new command attribute pattern, you can control dialog and popover visibility declaratively:

<button command="show-modal" commandfor="demo">Show Side Dialog</button>

<dialog id="demo" class="slide-out">
  <section>
    <header>
      <button title="Close" command="close" commandfor="demo" class="material-symbols-outlined">close</button>
    </header>
  </section> 
</dialog> 

Now, both <dialog> and <popover> elements have evolved to offer different interaction models. Popovers support light dismiss (i.e., clicking outside closes them), anchor positioning, and declarative usage, while dialogs now support closedby="any" to allow more flexible closing behavior, making them act a bit more like popovers while keeping their modal essence.

You can control the 'light-dismiss' option and specify which element triggers the dialog to close by using this [closeby] attribute, and no JavaScript required:

You can check out a working example here: Zero JavaScript Dialog Demo

We’ll revisit popovers again when we get to hover cards, since there's even more to cover.

2. Native Select Component

Customizing a <select> element has always been a pain — either you accepted the default browser styling or ended up rebuilding it from scratch with divs and JS. But that’s changing. With the new popover-based <select> and anchor positioning, you can now fully style and control the component while preserving accessibility and form behavior.

New pseudo-elements, HTML elements, and built-in styling for options and checkmarks let you build something custom without hacks.

Here’s a breakdown of the new anatomy:

Play with the full demo here: Customizable Select Demo

You’ll also get a feel for how anchoring works—a feature introduced at the same time.

To better visualize this anchoring logic, check out this Anchor tool.

A word of caution

As noted in this MDN article, the new <selectedcontent> may cause issues if you're dynamically updating <option> elements using JavaScript — those changes won’t automatically reflect inside <selectedcontent>.

And yes, support is still limited right now, so use it wisely in production apps.

To see a real-time walkthrough from the conference, here’s the timestamped demo.

3. Building a New Native Scroll Component

Creating smooth, accessible sliders or carousels has always meant reaching for external libraries or building your own logic. But now, CSS is making native scroll components a reality. You get:

• scroll-button pseudo-elements (for navigation controls)
• scroll-marker (for quick jump-to-points)
• Scroll-driven animations (yes, native!)

Here’s the anatomy of this new "slider":

This opens up a lot — tabs, carousels, progress steppers, multi-step forms, you name it. And small details like scroll shadows (that used to require JS or weird hacks) are now a breeze:

There’s a lot more to explore when it comes to scroll-state, so I recommend diving into Google’s official carousel demos. All the examples are editable, and the source code is available — great for learning or adapting for your own use.

Want something more interactive? Play with the Carousel Configurator. You can toggle options and see how the styles and behaviors change.

Beyond saving time, this new CSS-driven approach reduces JS payload and improves maintainability.

If there's no code — there's nothing to maintain.

4. Hover Card

Hover cards take the popover magic even further. Alongside popover, we now have attributes like interesttarget and popovertarget, unlocking more nuanced interactions.

Basically, there are now three types of popovers:

Let’s say you want to show extra context when the user hovers over something — no click required. Combine interesttarget with a popover and voilà:

Here’s a simplified hover card using just a popover:

You can fully customize it too:

Important to note: this animation behavior differs from a typical :hover effect — it’s more dynamic, controllable, and has delay/interest thresholds built-in.

Watch the live example here.

Feeling confused by all these new attributes? Don’t worry — it takes a bit of hands-on play to internalize it. You can dig deeper via the Interest Invokers explainer and the Popover documentation.

The short version:

• interesttarget = hover for a moment, show something
• popovertarget = click or focus, show something
• You can mix and match for rich interactions

Conclusion

The future of Web UI is more declarative, accessible, and efficient. As these features roll out more widely, we can ditch a lot of the boilerplate and focus on creativity instead.

Yes, it can feel overwhelming, especially for newer devs. But you don’t need to memorize every detail. Just knowing these features exist is half the battle. When a problem arises later, you’ll remember, “Oh yeah, I saw a demo about that,” and you’ll know where to look.

It’s not about memorizing — it’s about exposure.

With these updates, we’re entering a golden era of UI development. Less JavaScript. More clarity. Better accessibility. And honestly? A lot more fun.

Resources

1. Google I/O Web Day 3
2. Google Demos
3. Customizable select demo
4. Interest invokers proposal
5. Popover MDN docs
6. Web Status Platform dashboard
7. 10 updates from Google I/O 2025