Build Native-Like Bottom Sheets with CSS Scroll Snap

With modern web features like CSS scroll snap, it is now possible to create native-like bottom sheets with advanced features such as multiple snap points and nested scrolling – with close to zero JavaScript – bringing the smoothest possible user experience by relying on the browser’s own scroll functionality. CSS scroll snap bottom sheets Even better, we can utilize built-in accessibility support by leveraging native HTML features, such as the element and the Popover API. These powerful CSS capabilities led me to create pure-web-bottom-sheet, a lightweight library that provides a framework-agnostic web component with native-comparable performance and the smooth, responsive behavior users expect from bottom sheets. Popover API pure-web-bottom-sheet Why build another bottom sheet component? As a personal open source project, I have been developing Junaan.fi, a web application built with React that displays train schedules, locations, and compositions of trains in Finland on a map. As the map became the central UI element, I needed a bottom sheet component that would allow the map to remain full-screen while users could access secondary content. Junaan.fi React I evaluated several well-established existing options including react-spring-bottom-sheet, react-modal-sheet, Vaul, and Plain sheet. react-spring-bottom-sheet react-modal-sheet Vaul Plain sheet While these libraries work well for many scenarios, I found they did not quite match the specific requirements of my project. Specifically, I needed a component that could handle long scrollable content overlaid on a map element while supporting multiple snap points and delivering steady drag interaction on touch-based devices. After thorough testing, I found that achieving the smooth user experience I was looking for would require a different approach than using JavaScript-driven dragging animations that are prone to jank. This gap in the currently available solutions led me to explore how modern CSS and new web features could create a more responsive, native-like bottom sheet experience, particularly for touch-based mobile interactions. Key design principles I created pure-web-bottom-sheet as a pure Web Component to ensure flexibility across projects, regardless of the frontend framework. The implementation focuses on several key principles: Native scroll-driven sheet movement - Uses the browser’s own scroll mechanics instead of JavaScript-driven animations to adjust the sheet position through CSS scroll snapping Framework agnostic - Built as a pure vanilla Web Component to work with any frontend framework - it uses the standard Web Components APIs directly without additional abstraction libraries to minify bundle size, eliminate framework dependencies, and improve runtime performance by avoiding unnecessary abstractions. Accessibility built-in - Leverages native HTML elements like and the Popover API without reinventing the wheel Server-side rendering (SSR) support - Provides a Declarative Shadow DOM template for SSR compatibility Declarative configuration - Uses HTML attributes and slots for defining the bottom sheet layout, similar to the built-in web components Native scroll-driven sheet movement - Uses the browser’s own scroll mechanics instead of JavaScript-driven animations to adjust the sheet position through CSS scroll snapping Native scroll-driven sheet movement Framework agnostic - Built as a pure vanilla Web Component to work with any frontend framework - it uses the standard Web Components APIs directly without additional abstraction libraries to minify bundle size, eliminate framework dependencies, and improve runtime performance by avoiding unnecessary abstractions. Framework agnostic Accessibility built-in - Leverages native HTML elements like and the Popover API without reinventing the wheel Accessibility built-in Server-side rendering (SSR) support - Provides a Declarative Shadow DOM template for SSR compatibility Server-side rendering (SSR) support Declarative configuration - Uses HTML attributes and slots for defining the bottom sheet layout, similar to the built-in web components Declarative configuration Demo + examples Here is a simple Codepen demo showcasing the pure-web-bottom-sheet as a modal with multiple snap points: Here is a simple Codepen demo showcasing the pure-web-bottom-sheet as a modal with multiple snap points: https://codepen.io/viliket/pen/ZYQMjzE?embedable=true https://codepen.io/viliket/pen/ZYQMjzE?embedable=true You can view the live demo and more examples at https://viliket.github.io/pure-web-bottom-sheet/. https://viliket.github.io/pure-web-bottom-sheet/ How it works: The technical approach and core mechanics The following sections explain the core mechanics and implementation details behind the bottom sheet component. Component architecture The bottom sheet component follows patterns similar to built-in elements with declarative configuration through composed structure and HTML attributes: Custom header Custom content goes here Custom footer Custom header Custom content goes here Custom footer The internal shadow DOM structure provides the foundation for the component’s behavior: /* Styles */ /* Styles */ Scroll-based layout: the core principle The bottom sheet component leverages native scrolling with CSS scroll snap instead of JavaScript-based animations to adjust the sheet position. By utilizing the browser’s built-in scrolling physics, we achieve a smoother experience since the browser handles the scrolling on the compositor thread without affecting the main thread. Setting scroll-snap-type: y mandatory on the host element enables vertical scroll snapping and ensures the sheet always lands on a defined snap point after a scroll gesture: scroll-snap-type: y mandatory :host { overflow-y: scroll; scroll-snap-type: y mandatory; } :host { overflow-y: scroll; scroll-snap-type: y mandatory; } This approach transforms the host element into a “scrolling track” for the nested sheet element, creating the foundation for our bottom sheet behavior. A similar technique is also used by Apple Maps on the web and featured in the article Building a Drawer: The Versatility of Popover by Jhey Tompkins. Apple Maps Building a Drawer: The Versatility of Popover Configurable snap points A key feature of a bottom sheet is the ability to “snap” to different preset points. Our bottom sheet component implements this using a named snap slot that allows users to define multiple snap points declaratively: snap slot Each snap point is positioned using a CSS custom property --snap that specifies its distance from the bottom of the viewport. The initial class designates which snap point the sheet should initially snap to when opened (more of that in a later section). --snap initial Later, when the browser support for the CSS attr() function improves, we could alternatively use a data-* attribute-based approach (e.g., data-snap="25vh") instead of the --snap custom property to define the snap point value and then access it in CSS using top: attr(data-snap length-percentage). attr() data-snap="25vh" --snap top: attr(data-snap length-percentage) How it works How it works The shadow DOM of the component contains the following key elements that enable the snap behavior: These elements leverage the CSS scroll snap through the following CSS: /* Style for snap points (both slotted and default) */ .snap, ::slotted([slot="snap"]) { position: relative; top: var(--snap); } .snap::before, ::slotted([slot="snap"])::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; /* Height required for Safari to snap */ scroll-snap-align: var(--snap-point-align, start); content: ""; } /* Special element that creates the scrollable area for the host element acting as the "track" */ .snap.snap-bottom { position: static; top: initial; height: auto; &::after { display: block; position: static; height: var(--sheet-max-height); scroll-snap-align: none; content: ""; } } /* Style for snap points (both slotted and default) */ .snap, ::slotted([slot="snap"]) { position: relative; top: var(--snap); } .snap::before, ::slotted([slot="snap"])::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; /* Height required for Safari to snap */ scroll-snap-align: var(--snap-point-align, start); content: ""; } /* Special element that creates the scrollable area for the host element acting as the "track" */ .snap.snap-bottom { position: static; top: initial; height: auto; &::after { display: block; position: static; height: var(--sheet-max-height); scroll-snap-align: none; content: ""; } } Here is how the snap mechanism, supported by the elements and CSS presented above, works in practice: The .snap-bottom element creates an invisible scrollable “track” together with its ::after pseudo-element. This track has a height equal to the maximum height of the bottom sheet component. Each snap point element is positioned relative to the top of the host element using top: var(--snap): A snap point with --snap: 0% corresponds to the top of the host, where the sheet’s top edge is just outside the bottom of the host’s scrollport due to the height of the .snap-bottom::after element A snap point with --snap: 100% corresponds to the offset of 100% from the top of the host at which point the sheet is fully extended and fully occupies the host’s scrollport Values between 0% and 100% create intermediate snap positions When the user drags the sheet, the browser’s native scroll snapping takes over. As the host element scrolls, it “snaps” to these positioned elements, creating a smooth, native-like feel without any JavaScript-driven animations. The .snap-bottom element creates an invisible scrollable “track” together with its ::after pseudo-element. This track has a height equal to the maximum height of the bottom sheet component. The .snap-bottom element creates an invisible scrollable “track” together with its ::after pseudo-element. This track has a height equal to the maximum height of the bottom sheet component. .snap-bottom ::after Each snap point element is positioned relative to the top of the host element using top: var(--snap): A snap point with --snap: 0% corresponds to the top of the host, where the sheet’s top edge is just outside the bottom of the host’s scrollport due to the height of the .snap-bottom::after element A snap point with --snap: 100% corresponds to the offset of 100% from the top of the host at which point the sheet is fully extended and fully occupies the host’s scrollport Values between 0% and 100% create intermediate snap positions Each snap point element is positioned relative to the top of the host element using top: var(--snap): top: var(--snap) A snap point with --snap: 0% corresponds to the top of the host, where the sheet’s top edge is just outside the bottom of the host’s scrollport due to the height of the .snap-bottom::after element A snap point with --snap: 100% corresponds to the offset of 100% from the top of the host at which point the sheet is fully extended and fully occupies the host’s scrollport Values between 0% and 100% create intermediate snap positions A snap point with --snap: 0% corresponds to the top of the host, where the sheet’s top edge is just outside the bottom of the host’s scrollport due to the height of the .snap-bottom::after element A snap point with --snap: 0% corresponds to the top of the host, where the sheet’s top edge is just outside the bottom of the host’s scrollport due to the height of the .snap-bottom::after element --snap: 0% .snap-bottom::after A snap point with --snap: 100% corresponds to the offset of 100% from the top of the host at which point the sheet is fully extended and fully occupies the host’s scrollport A snap point with --snap: 100% corresponds to the offset of 100% from the top of the host at which point the sheet is fully extended and fully occupies the host’s scrollport --snap: 100% Values between 0% and 100% create intermediate snap positions Values between 0% and 100% create intermediate snap positions When the user drags the sheet, the browser’s native scroll snapping takes over. As the host element scrolls, it “snaps” to these positioned elements, creating a smooth, native-like feel without any JavaScript-driven animations. When the user drags the sheet, the browser’s native scroll snapping takes over. As the host element scrolls, it “snaps” to these positioned elements, creating a smooth, native-like feel without any JavaScript-driven animations. This approach allows the users to define any number of snap points with simple declarative HTML, while the browser handles all the positioning and scroll snap behavior automatically using pure CSS specified by the component. Initial snap point selection To specify which snap point the bottom sheet should initially snap to when it is displayed for the first time or reopened, users can add the initial class to the desired snap point. To ensure the sheet snaps to this point each time it is displayed, the component uses a trick inspired by the “Snappy Scroll-Start” technique presented by Roma Komarov. initial “Snappy Scroll-Start” The host element has a brief animation (0.01s) which sets a custom property --snap-point-align: none as the start state of the animation. This custom property is used by the snap points and the sheet element to set their scroll-snap-align property. The snap point assigned with the initial class overrides the custom property as --snap-point-align: start, so it is unaffected by the animation, forcing the host element’s scrollport to initially snap to the initial snap point, leveraging the Re-snapping After Layout Changes feature of the CSS scroll snap module. --snap-point-align: none scroll-snap-align initial --snap-point-align: start Re-snapping After Layout Changes :host { animation: initial-snap 0.01s both; } .snap::before, ::slotted([slot="snap"])::before, .sheet { scroll-snap-align: var(--snap-point-align, start); } .snap.initial, ::slotted([slot="snap"].initial) { --snap-point-align: start; } /* Temporarily disables scroll snapping for all snap points except the explicitly marked initial snap point (which overrides --snap-point-align) so that the sheet snaps to the initial snap point. */ @keyframes initial-snap { 0% { --snap-point-align: none; } 50% { /* Needed for the iOS Safari See https://stackoverflow.com/q/65653679 */ scroll-snap-type: initial; --snap-point-align: none; } } :host { animation: initial-snap 0.01s both; } .snap::before, ::slotted([slot="snap"])::before, .sheet { scroll-snap-align: var(--snap-point-align, start); } .snap.initial, ::slotted([slot="snap"].initial) { --snap-point-align: start; } /* Temporarily disables scroll snapping for all snap points except the explicitly marked initial snap point (which overrides --snap-point-align) so that the sheet snaps to the initial snap point. */ @keyframes initial-snap { 0% { --snap-point-align: none; } 50% { /* Needed for the iOS Safari See https://stackoverflow.com/q/65653679 */ scroll-snap-type: initial; --snap-point-align: none; } } Note also that while the CSS Scroll Snap Module Level 2 specification has introduced a new scroll-initial-target property, it is unsuitable for the bottom sheet’s initial snap point feature since the browser only applies the scroll initial target once (at least currently on Chromium), not every time the element display is toggled, which would not work for the bottom sheet, where the initial snap point should apply each time the bottom sheet is reopened. CSS Scroll Snap Module Level 2 scroll-initial-target Advanced features Sections below describe additional functionalities the bottom sheet component supports. Pointer event handling for non-modal sheets The bottom sheet component supports both modal (blocking underlying content) and non-modal (allowing page interaction) modes. For the non-modal bottom sheet behavior, the component manages the pointer events in the following way: the host element (which acts as the scrolling container) uses CSS declaration pointer-events: none to become “click-through”, while the sheet element uses pointer-events: all to capture interactions. pointer-events: none pointer-events: all This approach enables users to both manipulate the sheet by interacting with its surface and access the underlying page content when needed: :host { pointer-events: none; } .sheet { pointer-events: all; } :host { pointer-events: none; } .sheet { pointer-events: all; } While this solution works seamlessly in most browsers, iOS Safari currently requires a workaround due to a Webkit-specific bug. In iOS Safari, when a parent element has pointer-events: none, scroll interactions on child elements with pointer-events: auto fail to propagate properly to the parent scroll container - a critical issue for our bottom sheet architecture. Fortunately, developer J.J. Johnson documented a workaround that tricks iOS Safari into correctly handling the scroll behavior by adding a small horizontal overflow to the interactable child elements. pointer-events: none pointer-events: auto workaround Here is how the bottom sheet component implements this: @supports (-webkit-touch-callout: none) { .sheet-content, .sheet-header, .sheet-footer { overflow-x: scroll; overscroll-behavior-x: none; scrollbar-width: none; &::after { display: block; box-sizing: content-box; padding: inherit; padding-left: 0; width: calc(100% + 1px); height: 1px; content: ""; } } .sheet-content { scrollbar-width: auto; } } @supports (-webkit-touch-callout: none) { .sheet-content, .sheet-header, .sheet-footer { overflow-x: scroll; overscroll-behavior-x: none; scrollbar-width: none; &::after { display: block; box-sizing: content-box; padding: inherit; padding-left: 0; width: calc(100% + 1px); height: 1px; content: ""; } } .sheet-content { scrollbar-width: auto; } } Nested scrolling with CSS scroll-driven animations Bottom sheets commonly also support a “nested scrolling” mode that allows the user to scroll the nested sheet content independently from the sheet itself. To implement this behavior, our component leverages CSS scroll-driven animations - activated by adding the nested-scroll attribute to the host element. nested-scroll With this attribute set, the sheet element height animates in response to the host element’s vertical scroll position: :host { scroll-timeline: --sheet-timeline y; } :host([nested-scroll]) .sheet { animation: expand-sheet-height linear forwards; animation-timeline: --sheet-timeline; } @keyframes expand-sheet-height { from { height: 0; } to { height: 100%; } } :host { scroll-timeline: --sheet-timeline y; } :host([nested-scroll]) .sheet { animation: expand-sheet-height linear forwards; animation-timeline: --sheet-timeline; } @keyframes expand-sheet-height { from { height: 0; } to { height: 100%; } } For browsers that do not yet support scroll-driven animations, the component implements a JavaScript fallback that updates a custom property --sheet-position by listening to the scroll event on the host element to adjust the height of the sheet element: --sheet-position scroll @supports ( not ((animation-timeline: scroll()) and (animation-range: 0% 100%)) ) { :host([nested-scroll]) .sheet { height: calc(var(--sheet-position) - var(--sw-keyboard-height, 0) * 1px); } } @supports ( not ((animation-timeline: scroll()) and (animation-range: 0% 100%)) ) { :host([nested-scroll]) .sheet { height: calc(var(--sheet-position) - var(--sw-keyboard-height, 0) * 1px); } } The approach described above is simple and requires no JavaScript for modern browsers supporting scroll-driven animations. However, in general, it is not advisable to animate the element height (or any other “geometric properties”) since this causes relayout (also called “reflow”), which is an expensive operation for the CPU, particularly when the affected DOM is large. In our case, the reflow caused by the height animation affects only the sheet’s inner contents, but it can still get expensive if the inner DOM is complex, which depends on the context where the bottom sheet component is used. it is not advisable to animate the element height (or any other “geometric properties”) To avoid potential performance issues when animating the height property, the component supports a nested-scroll-optimization attribute to enable a performance optimization for this feature. When enabled, this optimization switches from expensive height animation (which triggers layout recalculations) to a more efficient transform-based animation during active scrolling. These transform-based animations run smoothly on the browser’s compositor thread without blocking the main thread. nested-scroll-optimization Here is how this JavaScript-backed optimization works: when a scroll event begins, the component: Toggles a data-scrolling attribute Calculates appropriate values for --sheet-content-offset-start and --sheet-content-offset-end based on the current scroll position of the nested sheet content (note that this computation is only done once when the scrolling begins) Uses these computed values in the CSS keyframe animation, which is driven by the host element’s scroll timeline Toggles a data-scrolling attribute data-scrolling Calculates appropriate values for --sheet-content-offset-start and --sheet-content-offset-end based on the current scroll position of the nested sheet content (note that this computation is only done once when the scrolling begins) --sheet-content-offset-start --sheet-content-offset-end Uses these computed values in the CSS keyframe animation, which is driven by the host element’s scroll timeline This optimization significantly improves scrolling performance for bottom sheets containing complex DOM structures. Here is the CSS behind this optimization: :host([nested-scroll]:not([expand-to-scroll])[data-scrolling]) { .sheet-content { /* Hide the scrollbar visually during scrolling */ scrollbar-color: transparent transparent; } } @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) { :host([nested-scroll]:not([expand-to-scroll])[data-scrolling]) { .sheet { animation: translate-sheet linear forwards; animation-timeline: --sheet-timeline; } .sheet-content { animation: translate-sheet-content linear forwards; animation-timeline: --sheet-timeline; } .sheet-footer { animation: translate-footer linear forwards; animation-timeline: --sheet-timeline; } } @keyframes translate-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes translate-sheet-content { from { transform: translateY(var(--sheet-content-offset-start, 0)); } to { transform: translateY(var(--sheet-content-offset-end, 0)); } } @keyframes translate-footer { from { transform: translateY(calc(-1 * var(--sheet-safe-max-height))); } to { transform: translateY(0); } } } /* Fallback for browsers that do not yet support scroll-driven animations */ @supports ( not ((animation-timeline: scroll()) and (animation-range: 0% 100%)) ) { :host([nested-scroll]:not([expand-to-scroll])[data-scrolling]) { .sheet { height: 100%; transform: translateY(calc(100% - var(--sheet-position, 0))); } .sheet-content { transform: translateY(var(--sheet-content-offset, 0)); } .sheet-footer { transform: translateY( calc(-1 * var(--sheet-safe-max-height) + var(--sheet-position, 0)) ); } } } :host([nested-scroll]:not([expand-to-scroll])[data-scrolling]) { .sheet-content { /* Hide the scrollbar visually during scrolling */ scrollbar-color: transparent transparent; } } @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) { :host([nested-scroll]:not([expand-to-scroll])[data-scrolling]) { .sheet { animation: translate-sheet linear forwards; animation-timeline: --sheet-timeline; } .sheet-content { animation: translate-sheet-content linear forwards; animation-timeline: --sheet-timeline; } .sheet-footer { animation: translate-footer linear forwards; animation-timeline: --sheet-timeline; } } @keyframes translate-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes translate-sheet-content { from { transform: translateY(var(--sheet-content-offset-start, 0)); } to { transform: translateY(var(--sheet-content-offset-end, 0)); } } @keyframes translate-footer { from { transform: translateY(calc(-1 * var(--sheet-safe-max-height))); } to { transform: translateY(0); } } } /* Fallback for browsers that do not yet support scroll-driven animations */ @supports ( not ((animation-timeline: scroll()) and (animation-range: 0% 100%)) ) { :host([nested-scroll]:not([expand-to-scroll])[data-scrolling]) { .sheet { height: 100%; transform: translateY(calc(100% - var(--sheet-position, 0))); } .sheet-content { transform: translateY(var(--sheet-content-offset, 0)); } .sheet-footer { transform: translateY( calc(-1 * var(--sheet-safe-max-height) + var(--sheet-position, 0)) ); } } } Cross-browser compatibility Currently, there are variations in how browser engines implement the Re-snapping After Layout Changes part of the CSS scroll snap module. While Chromium preserves scroll position within the snapped element after layout changes, Firefox and Safari re-snap to the top of the snapped element. To address this discrepancy, our component uses IntersectionObserver to detect when the sheet scrolls beyond the top (indicated by data-sheet-snap-position="-1") and temporarily disables snap alignment accordingly to avoid abrupt re-snaps when the sheet’s inner layout changes due to dynamic content: IntersectionObserver data-sheet-snap-position="-1" :host([data-sheet-snap-position="-1"]) { .sheet, .snap, ::slotted([slot="snap"]) { scroll-snap-align: none; } } :host([data-sheet-snap-position="-1"]) { .sheet, .snap, ::slotted([slot="snap"]) { scroll-snap-align: none; } } On-screen keyboard handling One important aspect for bottom sheets is to handle the on-screen keyboard without making the sheet content inaccessible while the keyboard is visible. To support this, the component leverages the keyboard-inset-bottom CSS environment variable from VirtualKeyboard API to adjust its height and bottom margin. keyboard-inset-bottom VirtualKeyboard API However, since the VirtualKeyboard API is currently only supported by Chromium browsers, the component implements a JavaScript fallback that listens to visual viewport resize events and updates a custom property --sw-keyboard-height, which the component uses to control the maximum height of the host element and .snap-bottom::after pseudo-element: --sw-keyboard-height .snap-bottom::after :host { --sheet-safe-max-height: calc( var(--sheet-max-height) - env(keyboard-inset-height, var(--sw-keyboard-height, 0px)) ); max-height: var(--sheet-safe-max-height); bottom: env(keyboard-inset-height, 0); } .snap.snap-bottom::after { max-height: var(--sheet-safe-max-height); } :host { --sheet-safe-max-height: calc( var(--sheet-max-height) - env(keyboard-inset-height, var(--sw-keyboard-height, 0px)) ); max-height: var(--sheet-safe-max-height); bottom: env(keyboard-inset-height, 0); } .snap.snap-bottom::after { max-height: var(--sheet-safe-max-height); } Additionally, most browsers, apart from Safari, also support the interactive-widget attribute on the “viewport” element to control how UI widgets like virtual keyboards affect the viewport, which can also be used to solve the same problem depending on the use case. interactive-widget Declarative shadow DOM and server-side rendering Declarative Shadow DOM, now baseline across all major browsers (since August 2024), enables full server-side rendering of the bottom sheet component: Using the declarative shadow DOM is particularly beneficial when the application needs the bottom sheet to appear open on page load, since it prevents the flash of unstyled content (FOUC) problem. Integration with native HTML components A key advantage of this CSS-first, web-component-based approach is its easy interoperability with native HTML dialog and popover API. By leveraging these native features, we gain built-in accessibility support, keyboard navigation, and proper focus management without additional JavaScript code. Dialog integration: Modal bottom sheets with native accessibility For modal bottom sheets, we can leverage the native element to handle focus trapping and accessibility automatically. Since browsers like Firefox and Safari do not support customized built-in elements, we cannot directly extend the element. do not support customized built-in elements Therefore, we use a companion custom element to augment the native dialog with swipe-to-dismiss functionality and smooth CSS transform-based slide transitions: Custom content goes here Open bottom sheet import { registerSheetElements } from "./path/to/pure-web-bottom-sheet"; registerSheetElements(); document.getElementById("show-button").addEventListener("click", () => { document.getElementById("bottom-sheet-dialog").showModal(); }); Custom content goes here Open bottom sheet import { registerSheetElements } from "./path/to/pure-web-bottom-sheet"; registerSheetElements(); document.getElementById("show-button").addEventListener("click", () => { document.getElementById("bottom-sheet-dialog").showModal(); }); ::slotted(dialog) { position: fixed; margin: 0; inset: 0; top: initial; border: none; background: unset; padding: 0; width: 100%; max-width: none; height: 100%; max-height: none; } ::slotted(dialog:not(:modal)) { pointer-events: none; } ::slotted(dialog[open]) { translate: 0 0; } @starting-style { ::slotted(dialog[open]) { translate: 0 100vh; } } ::slotted(dialog) { translate: 0 100vh; transition: translate 0.5s ease-out, overlay 0.5s ease-out allow-discrete, display var(--display-transition-duration, 0.5s) ease-out allow-discrete; } /* Snap position "2" corresponds to the fully collapsed state */ :host([data-sheet-snap-position="2"]) ::slotted(dialog:not([open])) { transition: none; } ::slotted(dialog) { position: fixed; margin: 0; inset: 0; top: initial; border: none; background: unset; padding: 0; width: 100%; max-width: none; height: 100%; max-height: none; } ::slotted(dialog:not(:modal)) { pointer-events: none; } ::slotted(dialog[open]) { translate: 0 0; } @starting-style { ::slotted(dialog[open]) { translate: 0 100vh; } } ::slotted(dialog) { translate: 0 100vh; transition: translate 0.5s ease-out, overlay 0.5s ease-out allow-discrete, display var(--display-transition-duration, 0.5s) ease-out allow-discrete; } /* Snap position "2" corresponds to the fully collapsed state */ :host([data-sheet-snap-position="2"]) ::slotted(dialog:not([open])) { transition: none; } The component implements the swipe-to-dismiss feature as follows: when the sheet is swiped to the bottom snap point (based on the native scrollsnapchange event with the IntersectionObserver used as a fallback for non-supporting browsers), the element emits a custom snap-position-change event that bubbles. scrollsnapchange snap-position-change The dialog manager listens for this event and automatically closes the dialog, creating a smooth dismiss gesture: // Inside the ` ` implementation this.addEventListener( "snap-position-change", (event: CustomEventInit & Event) => { if (event.detail) { this.dataset.sheetSnapPosition = event.detail.snapPosition; } if ( // Snap position "2" corresponds to the collapsed (closed) state event.detail?.snapPosition == "2" && event.target instanceof HTMLElement && event.target.hasAttribute("swipe-to-dismiss") && event.target.checkVisibility() ) { const parent = event.target.parentElement; if ( parent instanceof HTMLDialogElement && // Prevent Safari from closing the dialog immediately after opening // while the dialog open transition is still running. getComputedStyle(parent).getPropertyValue("translate") === "0px" ) { parent.close(); } } } ); // Inside the ` ` implementation this.addEventListener( "snap-position-change", (event: CustomEventInit & Event) => { if (event.detail) { this.dataset.sheetSnapPosition = event.detail.snapPosition; } if ( // Snap position "2" corresponds to the collapsed (closed) state event.detail?.snapPosition == "2" && event.target instanceof HTMLElement && event.target.hasAttribute("swipe-to-dismiss") && event.target.checkVisibility() ) { const parent = event.target.parentElement; if ( parent instanceof HTMLDialogElement && // Prevent Safari from closing the dialog immediately after opening // while the dialog open transition is still running. getComputedStyle(parent).getPropertyValue("translate") === "0px" ) { parent.close(); } } } ); Popover integration: lightweight non-modal bottom sheets For non-modal or lightweight bottom sheets, the native Popover API offers built-in focus management, light-dismiss functionality, and accessibility – all handled by the browser. Popover API Enabling the popover functionality only requires adding the popover attribute to the bottom sheet: popover Bottom sheet contents Toggle bottom sheet Bottom sheet contents Toggle bottom sheet To further enhance usability, we can implement smooth open and close animations with a few additional lines of CSS. The following example demonstrates slide-up transitions and backdrop fade effects synchronized with the sheet’s scroll position: :root { --transition-duration: 0.5s; --transition-timing: ease-out; } @property --sheet-open { syntax: " "; inherits: true; initial-value: 0; } bottom-sheet[popover]:popover-open { translate: 0 0; --sheet-open: 1; } @starting-style { bottom-sheet[popover]:popover-open { translate: 0 100vh; --sheet-open: 0; } } bottom-sheet[popover] { transition: --sheet-open var(--transition-duration) var(--transition-timing), translate var(--transition-duration) var(--transition-timing), overlay var(--transition-duration) var(--transition-timing) allow-discrete, display var(--transition-duration) var(--transition-timing) allow-discrete; translate: 0 100vh; } bottom-sheet[popover]:not(:popover-open) { display: none; } bottom-sheet[popover]::backdrop { animation: fade-in linear forwards; animation-timeline: --sheet-timeline; animation-range-end: 100vh; } @keyframes fade-in { from { opacity: 0; } to { opacity: calc(1 * var(--sheet-open)); } } :root { --transition-duration: 0.5s; --transition-timing: ease-out; } @property --sheet-open { syntax: " "; inherits: true; initial-value: 0; } bottom-sheet[popover]:popover-open { translate: 0 0; --sheet-open: 1; } @starting-style { bottom-sheet[popover]:popover-open { translate: 0 100vh; --sheet-open: 0; } } bottom-sheet[popover] { transition: --sheet-open var(--transition-duration) var(--transition-timing), translate var(--transition-duration) var(--transition-timing), overlay var(--transition-duration) var(--transition-timing) allow-discrete, display var(--transition-duration) var(--transition-timing) allow-discrete; translate: 0 100vh; } bottom-sheet[popover]:not(:popover-open) { display: none; } bottom-sheet[popover]::backdrop { animation: fade-in linear forwards; animation-timeline: --sheet-timeline; animation-range-end: 100vh; } @keyframes fade-in { from { opacity: 0; } to { opacity: calc(1 * var(--sheet-open)); } } The CSS above demonstrates several modern web platform features: CSS custom property --sheet-open registered with the @property rule to enable smooth transition between the sheet open and closed state @starting-style for popover entry effect when the bottom sheet is opened Animation timeline tied to sheet scroll position (--sheet-timeline) The transition-behavior: allow-discrete rule to enable transitions between discrete states (animating the popover from display: none, and animating into the top layer) CSS custom property --sheet-open registered with the @property rule to enable smooth transition between the sheet open and closed state --sheet-open @property @starting-style for popover entry effect when the bottom sheet is opened @starting-style Animation timeline tied to sheet scroll position (--sheet-timeline) --sheet-timeline The transition-behavior: allow-discrete rule to enable transitions between discrete states (animating the popover from display: none, and animating into the top layer) transition-behavior: allow-discrete display: none The result is a popover-based bottom sheet that smoothly slides up when opened, with its backdrop fading in as the sheet rises, and animates away gracefully when dismissed – all achieved with zero JavaScript, except for the swipe-to-dismiss feature to close the popover, which requires the following addition: bottomSheet.addEventListener( "snap-position-change", (event: CustomEventInit & Event) => { if ( // Snap position "2" corresponds to the collapsed (closed) state event.detail?.snapPosition == "2" && event.target instanceof HTMLElement && event.target.hasAttribute("swipe-to-dismiss") && event.target.checkVisibility() && // Prevent Safari from closing the popover immediately after opening // while the popover open transition is still running. getComputedStyle(event.target).getPropertyValue("translate") === "0px" ) { event.target.hidePopover(); } } ); bottomSheet.addEventListener( "snap-position-change", (event: CustomEventInit & Event) => { if ( // Snap position "2" corresponds to the collapsed (closed) state event.detail?.snapPosition == "2" && event.target instanceof HTMLElement && event.target.hasAttribute("swipe-to-dismiss") && event.target.checkVisibility() && // Prevent Safari from closing the popover immediately after opening // while the popover open transition is still running. getComputedStyle(event.target).getPropertyValue("translate") === "0px" ) { event.target.hidePopover(); } } ); The code above adds an event listener to the bottom sheet element, which listens for the custom event snap-position-change that the element dispatches when its snap position changes. snap-position-change Usage in various frameworks Since the bottom sheet is built as a pure vanilla Web Component, it can be used with any frontend framework or in vanilla HTML. The following sections show how to integrate it with popular frameworks. Astro Astro has built-in support for web components, and it also supports directly defining the declarative shadow DOM ( element with a shadowrootmode attribute) on the server side: shadowrootmode --- import { bottomSheetTemplate } from "pure-web-bottom-sheet/ssr"; --- Custom header Custom footer Custom content import { BottomSheet } from "pure-web-bottom-sheet"; customElements.define("bottom-sheet", BottomSheet); --- import { bottomSheetTemplate } from "pure-web-bottom-sheet/ssr"; --- Custom header Custom footer Custom content import { BottomSheet } from "pure-web-bottom-sheet"; customElements.define("bottom-sheet", BottomSheet); React (with Next.js for server-side rendering) With React, the declarative shadow DOM support requires a measure against the following problem: React hydration fails with declarative shadow root because the browser DOM parser immediately upgrades the element to a ShadowRoot, causing a hydration mismatch. The solution, implemented in the pure-web-bottom-sheet library, is to create a wrapper component that renders the template element only on the server to avoid the hydration mismatch: // ShadowRootTemplate.tsx "use client"; const isServer = typeof window === "undefined"; export default function Template({ html }: { html: string }) { if (isServer) { return ( ); } return null; } // BottomSheet.tsx import ShadowRootTemplate from "./ShadowRootTemplate"; export default function BottomSheet({ children, ...props }: WebComponentProps ) { return ( <> { } {children} ); } // ShadowRootTemplate.tsx "use client"; const isServer = typeof window === "undefined"; export default function Template({ html }: { html: string }) { if (isServer) { return ( ); } return null; } // BottomSheet.tsx import ShadowRootTemplate from "./ShadowRootTemplate"; export default function BottomSheet({ children, ...props }: WebComponentProps ) { return ( <> { } {children} ); } Vue (with Nuxt for server-side rendering) Vue has a similar hydration challenge with the declarative shadow DOM to React, which our bottom sheet tackles the same way as in React: rendering the template element only on the server side. import { h, Fragment } from "vue"; const props = defineProps({ html: { type: String, required: true, }, }); const isServer = typeof window === "undefined"; const renderShadowRootTemplate = () => { if (!isServer) return h(Fragment, []); return h(Fragment, [ h("template", { shadowrootmode: "open", innerHTML: props.html, }), ]); }; import { defineComponent, h, onMounted } from "vue"; import { bottomSheetTemplate } from "../web/index.ssr"; import ShadowRootTemplate from "./ShadowRootTemplate.vue"; // Vue wrapper component for the BottomSheet web component so that // the library users do not need to define bottom-sheet as a custom element const BottomSheet = defineComponent({ name: "bottom-sheet", setup(_, { attrs, slots }) { return () => h("bottom-sheet", attrs, slots); }, }); onMounted(() => { import("../web/index.client").then(({ BottomSheet }) => { if (!customElements.get("bottom-sheet")) { customElements.define("bottom-sheet", BottomSheet); } }); }); import { h, Fragment } from "vue"; const props = defineProps({ html: { type: String, required: true, }, }); const isServer = typeof window === "undefined"; const renderShadowRootTemplate = () => { if (!isServer) return h(Fragment, []); return h(Fragment, [ h("template", { shadowrootmode: "open", innerHTML: props.html, }), ]); }; import { defineComponent, h, onMounted } from "vue"; import { bottomSheetTemplate } from "../web/index.ssr"; import ShadowRootTemplate from "./ShadowRootTemplate.vue"; // Vue wrapper component for the BottomSheet web component so that // the library users do not need to define bottom-sheet as a custom element const BottomSheet = defineComponent({ name: "bottom-sheet", setup(_, { attrs, slots }) { return () => h("bottom-sheet", attrs, slots); }, }); onMounted(() => { import("../web/index.client").then(({ BottomSheet }) => { if (!customElements.get("bottom-sheet")) { customElements.define("bottom-sheet", BottomSheet); } }); }); Conclusion The pure-web-bottom-sheet component demonstrates how modern web can now natively handle UI patterns that previously required complex JavaScript-based logic. By leveraging CSS scroll snap, scroll-driven animations, and other modern web platform features, we can create bottom sheets that: Feel more native and responsive than JavaScript-based solutions Provide better performance by utilizing browser-native scrolling physics Maintain accessibility through standard HTML elements Work across frameworks with minimal integration code Support server-side rendering for optimal initial page load performance Feel more native and responsive than JavaScript-based solutions Provide better performance by utilizing browser-native scrolling physics Maintain accessibility through standard HTML elements Work across frameworks with minimal integration code Support server-side rendering for optimal initial page load performance As the web platform evolves, more UI components will transition from complex, JavaScript-heavy solutions to simpler implementations supported by built-in native web features, improving performance and user experience. If you are interested in the future of web UI, also check out the Open UI W3C Community Group, which is actively shaping new native components for the platform. Open UI W3C Community Group Give pure-web-bottom-sheet a try, and experience the power of latest web features for yourself! pure-web-bottom-sheet