Neapolitan Pasta Maker

    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/material__dom package

    14.0.0 • Public • Published


    MDC DOM provides commonly-used utilities for inspecting, traversing, and manipulating the DOM.

    Most of the time, you shouldn't need to depend on mdc-dom directly. It is useful however if you'd like to write custom components that follow MDC Web's pattern and elegantly integrate with the MDC Web ecosystem.


    npm install @material/dom

    Basic Usage

    import * as ponyfill from '@material/dom/ponyfill';

    See Importing the JS component for more information on how to import JavaScript.

    Ponyfill Functions

    The ponyfill module provides the following functions:

    Function Signature Description
    closest(element: Element, selector: string) => ?Element Returns the ancestor of the given element matching the given selector (which may be the element itself if it matches), or null if no matching ancestor is found.
    matches(element: Element, selector: string) => boolean Returns true if the given element matches the given CSS selector.
    estimateScrollWidth(element: Element) => number Returns the true optical width of the element if visible or an estimation if hidden by a parent element with display: none;.

    Event Functions

    External frameworks and libraries can use the following event utility methods.

    Method Signature Description
    util.applyPassive(globalObj = window) => object Determine whether the current browser supports passive event listeners

    Focus Trap

    The FocusTrap utility traps focus within a given element. It is intended for usage from MDC-internal components like dialog and modal drawer.

    Method Signature Description
    trapFocus() => void Traps focus in the root element. Also focuses on initialFocusEl if set; otherwise, sets initial focus to the first focusable child element.
    releaseFocus() => void Releases focus from the root element. Also restores focus to the previously focused element.


    The announce utility file contains a single helper method for announcing a message via an aria-live region. It is intended for usage from MDC-internal components.

    Method Signature Description
    announce(message: string, options?: AnnouncerMessageOptions) => void Announces the message via an aria-live region with the given options. AnnouncerMessageOptions.priority defaults to polite and AnnouncerMessageOptions.ownerDocument defaults to the global document.


    The keyboard utility provides helper methods for normalizing KeyboardEvent keys across browsers. It is intended for usage from MDC-internal components.

    Method Signature Description
    normalizeKey(evt: KeyboardEvent) => string Returns a normalized string derived from KeyboardEvent's keyCode property to be standard across browsers.
    isNavigationEvent(evt: KeyboardEvent) => boolean Returns true if the event is a navigation event (Page Up, Page Down, Home, End, Left, Up, Right, Down).


    The module provides a single SASS mixin which helps improves a DOM element's UX for high-contrast mode users.

    Mixin Description
    transparent-border Emits necessary layout styles to set a transparent border around an element without interfering with the rest of its component layout. The border is only visible in high-contrast mode. The target element should be a child of a relatively positioned top-level element (i.e. a ::before pseudo-element).




    npm i @material/dom

    DownloadsWeekly Downloads






    Unpacked Size

    113 kB

    Total Files


    Last publish


    • yefim
    • abhiomkar
    • azakus
    • bicknellr
    • material-admin
    • aprigogin
    • patrickrodee
    • aomarks
    • emarquez
    • allanchen
    • esgonzalez
    • asyncliz
    • candysonya
    • ssuarez
    • taylorv