New in Chrome 146

Chrome 146 is rolling out now, and this post shares some of the key features from the release. Read the full Chrome 146 release notes.

Highlights from this release:

• Scroll-triggered animations adds scroll-position-based control of animations.

• Scoped custom element registry prevents custom element name conflicts.

• The Sanitizer API helps build XSS-free web applications.

Scroll-triggered animations

This feature adds scroll-position-based control of animations, for example, playing, pausing, and resetting animations.

A common pattern on pages across the web is to start an animation when a scroll position is reached. Developers often do this by using JavaScript to manually detect that an element is within its scroll container's viewport and to start a corresponding animation (for example, sliding that element into view). Many of these use cases rely on declaratively provided information. This feature lets you create such interactions declaratively with CSS.

Learn more in Scroll-triggered animations are coming

Scoped custom element registry

This feature lets multiple custom element definitions for a single tag name exist within a page. This prevents custom element name conflicts when a web app uses libraries from multiple sources. This is achieved by allowing user code to create multiple custom element registries and associate them with tree scopes and elements that function as scoping objects.

Find out more in Make custom elements behave with scoped registries.

The Sanitizer API

The Sanitizer API offers a way to remove content that might execute script from arbitrary, user-supplied HTML content. The goal is to make it easier to build XSS-free web applications. This is an updated version of a previous attempt to create a Sanitizer API. This new version is also available in Firefox.