tessl/npm-material--dom

DOM manipulation utilities for Material Components providing cross-browser compatibility, focus management, and accessibility features.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

DOM Ponyfills

Name: tessl/npm-material--dom
Author: tessl

Cross-browser DOM utilities that provide consistent functionality without modifying global prototypes. A "ponyfill" is a polyfill that doesn't modify the global prototype chain, making it safer for libraries.

Capabilities

Element Matching

Check if an element matches a CSS selector with cross-browser compatibility.

/**
 * Returns true if the given element matches the given CSS selector
 * @param element - The element to test
 * @param selector - CSS selector string
 * @returns Whether the element matches the selector
 */
function matches(element: Element, selector: string): boolean;

Usage Examples:

import { matches } from '@material/dom/ponyfill';

const button = document.querySelector('button');
if (matches(button, '.active')) {
  // Element has 'active' class
}

if (matches(button, '[aria-pressed="true"]')) {
  // Button is pressed
}

Closest Ancestor

Find the closest ancestor element (including the element itself) that matches a selector.

/**
 * 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
 * @param element - The element to start searching from
 * @param selector - CSS selector string to match
 * @returns The matching ancestor element or null
 */
function closest(element: Element, selector: string): Element | null;

Usage Examples:

import { closest } from '@material/dom/ponyfill';

const listItem = document.querySelector('li');
const list = closest(listItem, 'ul, ol');
if (list) {
  // Found parent list element
}

const card = closest(element, '.mdc-card');
if (card) {
  // Found ancestor with 'mdc-card' class
}

Scroll Width Estimation

Get the true optical width of an element, even when hidden by display: none.

/**
 * Returns the true optical width of the element if visible or an estimation if hidden 
 * by a parent element with display: none
 * @param element - The element whose width to estimate
 * @returns The scroll width in pixels
 */
function estimateScrollWidth(element: Element): number;

Usage Examples:

import { estimateScrollWidth } from '@material/dom/ponyfill';

// Get width even if element is hidden
const hiddenElement = document.querySelector('.hidden-content');
const width = estimateScrollWidth(hiddenElement);

// Useful for measuring text width before showing
const textElement = document.createElement('span');
textElement.textContent = 'Long text content';
textElement.style.position = 'absolute';
textElement.style.visibility = 'hidden';
document.body.appendChild(textElement);

const textWidth = estimateScrollWidth(textElement);
document.body.removeChild(textElement);