diff --git a/packages/mdc-base/component.ts b/packages/mdc-base/component.ts
index cd3f43a678f..527aa54d5f4 100644
--- a/packages/mdc-base/component.ts
+++ b/packages/mdc-base/component.ts
@@ -22,7 +22,7 @@
  */
 
 import {safeAttrPrefix} from 'safevalues';
-import {safeElement} from 'safevalues/dom';
+import {setElementPrefixedAttribute} from 'safevalues/dom';
 
 import {MDCFoundation} from './foundation';
 import {CustomEventListener, EventType, SpecificEventListener} from './types';
@@ -46,14 +46,16 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
   protected foundation: FoundationType;
 
   constructor(
-      public root: HTMLElement, foundation?: FoundationType,
-      ...args: unknown[]) {
+    public root: HTMLElement,
+    foundation?: FoundationType,
+    ...args: unknown[]
+  ) {
     this.initialize(...args);
     // Note that we initialize foundation here and not within the constructor's
     // default param so that this.root is defined and can be used within the
     // foundation class.
     this.foundation =
-        foundation === undefined ? this.getDefaultFoundation() : foundation;
+      foundation === undefined ? this.getDefaultFoundation() : foundation;
     this.foundation.init();
     this.initialSyncWithDOM();
   }
@@ -72,8 +74,9 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
     // Subclasses must override this method to return a properly configured
     // foundation class for the component.
     throw new Error(
-        'Subclasses must override getDefaultFoundation to return a properly configured ' +
-        'foundation class');
+      'Subclasses must override getDefaultFoundation to return a properly configured ' +
+        'foundation class',
+    );
   }
 
   initialSyncWithDOM() {
@@ -97,14 +100,20 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
    * This is most useful when listening for custom events.
    */
   listen<K extends EventType>(
-      eventType: K, handler: SpecificEventListener<K>,
-      options?: AddEventListenerOptions|boolean): void;
+    eventType: K,
+    handler: SpecificEventListener<K>,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
   listen<E extends Event>(
-      eventType: string, handler: CustomEventListener<E>,
-      options?: AddEventListenerOptions|boolean): void;
+    eventType: string,
+    handler: CustomEventListener<E>,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
   listen(
-      eventType: string, handler: EventListener,
-      options?: AddEventListenerOptions|boolean) {
+    eventType: string,
+    handler: EventListener,
+    options?: AddEventListenerOptions | boolean,
+  ) {
     this.root.addEventListener(eventType, handler, options);
   }
 
@@ -113,14 +122,20 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
    * This is most useful when unlistening for custom events.
    */
   unlisten<K extends EventType>(
-      eventType: K, handler: SpecificEventListener<K>,
-      options?: AddEventListenerOptions|boolean): void;
+    eventType: K,
+    handler: SpecificEventListener<K>,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
   unlisten<E extends Event>(
-      eventType: string, handler: CustomEventListener<E>,
-      options?: AddEventListenerOptions|boolean): void;
+    eventType: string,
+    handler: CustomEventListener<E>,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
   unlisten(
-      eventType: string, handler: EventListener,
-      options?: AddEventListenerOptions|boolean) {
+    eventType: string,
+    handler: EventListener,
+    options?: AddEventListenerOptions | boolean,
+  ) {
     this.root.removeEventListener(eventType, handler, options);
   }
 
@@ -128,7 +143,11 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
    * Fires a cross-browser-compatible custom event from the component root of
    * the given type, with the given data.
    */
-  emit<T extends object>(eventType: string, eventData: T, shouldBubble = false) {
+  emit<T extends object>(
+    eventType: string,
+    eventData: T,
+    shouldBubble = false,
+  ) {
     let event: CustomEvent<T>;
     if (typeof CustomEvent === 'function') {
       event = new CustomEvent<T>(eventType, {
@@ -153,9 +172,9 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
    * caller can't set any attribute.
    */
   protected safeSetAttribute(
-      element: HTMLElement,
-      attribute: string,
-      value: string,
+    element: HTMLElement,
+    attribute: string,
+    value: string,
   ) {
     if (attribute.toLowerCase() === 'tabindex') {
       element.tabIndex = Number(value);
@@ -163,11 +182,11 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
       const dataKey = toCamelCase(attribute.replace(/^data-/, ''));
       element.dataset[dataKey] = value;
     } else {
-      safeElement.setPrefixedAttribute(
-          [safeAttrPrefix`aria-`, safeAttrPrefix`role`],
-          element,
-          attribute,
-          value,
+      setElementPrefixedAttribute(
+        [safeAttrPrefix`aria-`, safeAttrPrefix`role`],
+        element,
+        attribute,
+        value,
       );
     }
   }
diff --git a/packages/mdc-chips/action/component.ts b/packages/mdc-chips/action/component.ts
index ea7a5f91d0f..68f6dd791af 100644
--- a/packages/mdc-chips/action/component.ts
+++ b/packages/mdc-chips/action/component.ts
@@ -29,11 +29,18 @@ import {MDCRipple, MDCRippleFactory} from '@material/ripple/component';
 import {MDCRippleFoundation} from '@material/ripple/foundation';
 import {MDCRippleCapableSurface} from '@material/ripple/types';
 import {safeAttrPrefix} from 'safevalues';
-import {safeElement} from 'safevalues/dom';
+import {setElementPrefixedAttribute} from 'safevalues/dom';
 
 import {MDCChipActionAdapter} from './adapter';
-import {computePrimaryActionRippleClientRect, GRAPHIC_SELECTED_WIDTH_STYLE_PROP} from './component-ripple';
-import {MDCChipActionCssClasses, MDCChipActionFocusBehavior, MDCChipActionType} from './constants';
+import {
+  computePrimaryActionRippleClientRect,
+  GRAPHIC_SELECTED_WIDTH_STYLE_PROP,
+} from './component-ripple';
+import {
+  MDCChipActionCssClasses,
+  MDCChipActionFocusBehavior,
+  MDCChipActionType,
+} from './constants';
 import {MDCChipActionFoundation} from './foundation';
 import {MDCChipPrimaryActionFoundation} from './primary-foundation';
 import {MDCChipTrailingActionFoundation} from './trailing-foundation';
@@ -42,9 +49,10 @@ import {MDCChipTrailingActionFoundation} from './trailing-foundation';
  * MDCChipActionFactory is used by the parent MDCChip component to initialize
  * chip actions.
  */
-export type MDCChipActionFactory =
-    (el: HTMLElement, foundation?: MDCChipActionFoundation) => MDCChipAction;
-
+export type MDCChipActionFactory = (
+  el: HTMLElement,
+  foundation?: MDCChipActionFoundation,
+) => MDCChipAction;
 
 const ALLOWED_ATTR_PREFIXES = [
   safeAttrPrefix`aria-`,
@@ -58,8 +66,10 @@ const ALLOWED_ATTR_PREFIXES = [
  * MDCChipAction provides component encapsulation of the different foundation
  * implementations.
  */
-export class MDCChipAction extends
-    MDCComponent<MDCChipActionFoundation> implements MDCRippleCapableSurface {
+export class MDCChipAction
+  extends MDCComponent<MDCChipActionFoundation>
+  implements MDCRippleCapableSurface
+{
   static override attachTo(root: HTMLElement): MDCChipAction {
     return new MDCChipAction(root);
   }
@@ -77,14 +87,17 @@ export class MDCChipAction extends
   }
 
   override initialize(
-      rippleFactory: MDCRippleFactory = (el, foundation) =>
-          new MDCRipple(el, foundation)) {
+    rippleFactory: MDCRippleFactory = (el, foundation) =>
+      new MDCRipple(el, foundation),
+  ) {
     const rippleAdapter: MDCRippleAdapter = {
       ...MDCRipple.createAdapter(this),
       computeBoundingRect: () => this.computeRippleClientRect(),
     };
-    this.rippleInstance =
-        rippleFactory(this.root, new MDCRippleFoundation(rippleAdapter));
+    this.rippleInstance = rippleFactory(
+      this.root,
+      new MDCRippleFoundation(rippleAdapter),
+    );
   }
 
   override initialSyncWithDOM() {
@@ -124,8 +137,12 @@ export class MDCChipAction extends
         this.root.removeAttribute(name);
       },
       setAttribute: (name, value) => {
-        safeElement.setPrefixedAttribute(
-            ALLOWED_ATTR_PREFIXES, this.root, name, value);
+        setElementPrefixedAttribute(
+          ALLOWED_ATTR_PREFIXES,
+          this.root,
+          name,
+          value,
+        );
       },
     };
 
@@ -171,14 +188,19 @@ export class MDCChipAction extends
 
   private computeRippleClientRect(): DOMRect {
     if (this.root.classList.contains(MDCChipActionCssClasses.PRIMARY_ACTION)) {
-      const chipRoot =
-          closest(this.root, `.${MDCChipActionCssClasses.CHIP_ROOT}`);
+      const chipRoot = closest(
+        this.root,
+        `.${MDCChipActionCssClasses.CHIP_ROOT}`,
+      );
       // Return the root client rect since it's better than nothing
       if (!chipRoot) return this.root.getBoundingClientRect();
-      const graphicWidth = window.getComputedStyle(chipRoot).getPropertyValue(
-          GRAPHIC_SELECTED_WIDTH_STYLE_PROP);
+      const graphicWidth = window
+        .getComputedStyle(chipRoot)
+        .getPropertyValue(GRAPHIC_SELECTED_WIDTH_STYLE_PROP);
       return computePrimaryActionRippleClientRect(
-          chipRoot.getBoundingClientRect(), graphicWidth);
+        chipRoot.getBoundingClientRect(),
+        graphicWidth,
+      );
     }
 
     return this.root.getBoundingClientRect();
diff --git a/packages/mdc-switch/deprecated/component.ts b/packages/mdc-switch/deprecated/component.ts
index cbec816a911..f90865543f2 100644
--- a/packages/mdc-switch/deprecated/component.ts
+++ b/packages/mdc-switch/deprecated/component.ts
@@ -30,14 +30,16 @@ import {MDCRipple} from '@material/ripple/component';
 import {MDCRippleFoundation} from '@material/ripple/foundation';
 import {MDCRippleCapableSurface} from '@material/ripple/types';
 import {safeAttrPrefix} from 'safevalues';
-import {safeElement} from 'safevalues/dom';
+import {setElementPrefixedAttribute} from 'safevalues/dom';
 
 import {MDCSwitchAdapter} from './adapter';
 import {MDCSwitchFoundation} from './foundation';
 
 /** MDC Switch */
-export class MDCSwitch extends MDCComponent<MDCSwitchFoundation> implements
-    MDCRippleCapableSurface {
+export class MDCSwitch
+  extends MDCComponent<MDCSwitchFoundation>
+  implements MDCRippleCapableSurface
+{
   static override attachTo(root: HTMLElement) {
     return new MDCSwitch(root);
   }
@@ -76,13 +78,17 @@ export class MDCSwitch extends MDCComponent<MDCSwitchFoundation> implements
       removeClass: (className) => {
         this.root.classList.remove(className);
       },
-      setNativeControlChecked: (checked) => this.nativeControl.checked =
-          checked,
-      setNativeControlDisabled: (disabled) => this.nativeControl.disabled =
-          disabled,
+      setNativeControlChecked: (checked) =>
+        (this.nativeControl.checked = checked),
+      setNativeControlDisabled: (disabled) =>
+        (this.nativeControl.disabled = disabled),
       setNativeControlAttr: (attr, value) => {
-        safeElement.setPrefixedAttribute(
-            [safeAttrPrefix`aria-`], this.nativeControl, attr, value);
+        setElementPrefixedAttribute(
+          [safeAttrPrefix`aria-`],
+          this.nativeControl,
+          attr,
+          value,
+        );
       },
     };
     return new MDCSwitchFoundation(adapter);
@@ -110,8 +116,9 @@ export class MDCSwitch extends MDCComponent<MDCSwitchFoundation> implements
 
   private createRipple(): MDCRipple {
     const {RIPPLE_SURFACE_SELECTOR} = MDCSwitchFoundation.strings;
-    const rippleSurface =
-        this.root.querySelector<HTMLElement>(RIPPLE_SURFACE_SELECTOR)!;
+    const rippleSurface = this.root.querySelector<HTMLElement>(
+      RIPPLE_SURFACE_SELECTOR,
+    )!;
 
     // DO NOT INLINE this variable. For backward compatibility, foundations take
     // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
@@ -123,14 +130,21 @@ export class MDCSwitch extends MDCComponent<MDCSwitchFoundation> implements
       },
       computeBoundingRect: () => rippleSurface.getBoundingClientRect(),
       deregisterInteractionHandler: <K extends EventType>(
-          eventType: K, handler: SpecificEventListener<K>) => {
+        eventType: K,
+        handler: SpecificEventListener<K>,
+      ) => {
         this.nativeControl.removeEventListener(
-            eventType, handler, applyPassive());
+          eventType,
+          handler,
+          applyPassive(),
+        );
       },
       isSurfaceActive: () => matches(this.nativeControl, ':active'),
       isUnbounded: () => true,
       registerInteractionHandler: <K extends EventType>(
-          eventType: K, handler: SpecificEventListener<K>) => {
+        eventType: K,
+        handler: SpecificEventListener<K>,
+      ) => {
         this.nativeControl.addEventListener(eventType, handler, applyPassive());
       },
       removeClass: (className: string) => {
diff --git a/packages/mdc-tooltip/component.ts b/packages/mdc-tooltip/component.ts
index c12860c41fb..26c1828db0d 100644
--- a/packages/mdc-tooltip/component.ts
+++ b/packages/mdc-tooltip/component.ts
@@ -24,10 +24,17 @@
 import {MDCComponent} from '@material/base/component';
 import {EventType, SpecificEventListener} from '@material/base/types';
 import {safeAttrPrefix} from 'safevalues';
-import {safeElement} from 'safevalues/dom';
+import {setElementPrefixedAttribute} from 'safevalues/dom';
 
 import {MDCTooltipAdapter} from './adapter';
-import {AnchorBoundaryType, CssClasses, events, PositionWithCaret, XPosition, YPosition} from './constants';
+import {
+  AnchorBoundaryType,
+  CssClasses,
+  events,
+  PositionWithCaret,
+  XPosition,
+  YPosition,
+} from './constants';
 import {MDCTooltipFoundation} from './foundation';
 
 const ARIA_ATTR_PREFIX = [safeAttrPrefix`aria-`];
@@ -38,9 +45,9 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
     return new MDCTooltip(root);
   }
 
-  private anchorElem!: HTMLElement;       // assigned in initialize
-  private isTooltipRich!: boolean;        // assigned in initialSyncWithDOM
-  private isTooltipPersistent!: boolean;  // assigned in initialSyncWithDOM
+  private anchorElem!: HTMLElement; // assigned in initialize
+  private isTooltipRich!: boolean; // assigned in initialSyncWithDOM
+  private isTooltipPersistent!: boolean; // assigned in initialSyncWithDOM
 
   private handleMouseEnter!: SpecificEventListener<'mouseenter'>;
   private handleFocus!: SpecificEventListener<'focus'>;
@@ -56,13 +63,13 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
       throw new Error('MDCTooltip: Tooltip component must have an id.');
     }
 
-    const anchorElem = document.querySelector<HTMLElement>(
-                           `[data-tooltip-id="${tooltipId}"]`) ||
-        document.querySelector<HTMLElement>(
-            `[aria-describedby="${tooltipId}"]`);
+    const anchorElem =
+      document.querySelector<HTMLElement>(`[data-tooltip-id="${tooltipId}"]`) ||
+      document.querySelector<HTMLElement>(`[aria-describedby="${tooltipId}"]`);
     if (!anchorElem) {
       throw new Error(
-          'MDCTooltip: Tooltip component requires an anchor element annotated with [aria-describedby] or [data-tooltip-id].');
+        'MDCTooltip: Tooltip component requires an anchor element annotated with [aria-describedby] or [data-tooltip-id].',
+      );
     }
     this.anchorElem = anchorElem;
   }
@@ -119,12 +126,18 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
         this.anchorElem.removeEventListener('click', this.handleClick);
       } else {
         this.anchorElem.removeEventListener(
-            'mouseenter', this.handleMouseEnter);
+          'mouseenter',
+          this.handleMouseEnter,
+        );
         this.anchorElem.removeEventListener('focus', this.handleFocus);
         this.anchorElem.removeEventListener(
-            'mouseleave', this.handleMouseLeave);
+          'mouseleave',
+          this.handleMouseLeave,
+        );
         this.anchorElem.removeEventListener(
-            'touchstart', this.handleTouchstart);
+          'touchstart',
+          this.handleTouchstart,
+        );
         this.anchorElem.removeEventListener('touchend', this.handleTouchend);
       }
     }
@@ -134,9 +147,9 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
   }
 
   setTooltipPosition(position: {
-    xPos?: XPosition,
-    yPos?: YPosition,
-    withCaretPos?: PositionWithCaret
+    xPos?: XPosition;
+    yPos?: YPosition;
+    withCaretPos?: PositionWithCaret;
   }) {
     this.foundation.setTooltipPosition(position);
   }
@@ -169,8 +182,11 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
    * to the anchor on scroll.
    */
   attachScrollHandler(
-      addEventListenerFn: <K extends EventType>(
-          event: K, handler: SpecificEventListener<K>) => void) {
+    addEventListenerFn: <K extends EventType>(
+      event: K,
+      handler: SpecificEventListener<K>,
+    ) => void,
+  ) {
     this.foundation.attachScrollHandler(addEventListenerFn);
   }
 
@@ -179,8 +195,11 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
    * event handler from elements on the page.
    */
   removeScrollHandler(
-      removeEventHandlerFn: <K extends EventType>(
-          event: K, handler: SpecificEventListener<K>) => void) {
+    removeEventHandlerFn: <K extends EventType>(
+      event: K,
+      handler: SpecificEventListener<K>,
+    ) => void,
+  ) {
     this.foundation.removeScrollHandler(removeEventHandlerFn);
   }
 
@@ -188,8 +207,7 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
     const adapter: MDCTooltipAdapter = {
       getAttribute: (attr) => this.root.getAttribute(attr),
       setAttribute: (attr, value) => {
-        safeElement.setPrefixedAttribute(
-            ARIA_ATTR_PREFIX, this.root, attr, value);
+        setElementPrefixedAttribute(ARIA_ATTR_PREFIX, this.root, attr, value);
       },
       removeAttribute: (attr) => {
         this.root.removeAttribute(attr);
@@ -202,15 +220,17 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
         this.root.classList.remove(className);
       },
       getComputedStyleProperty: (propertyName) => {
-        return window.getComputedStyle(this.root).getPropertyValue(
-            propertyName);
+        return window
+          .getComputedStyle(this.root)
+          .getPropertyValue(propertyName);
       },
       setStyleProperty: (propertyName, value) => {
         this.root.style.setProperty(propertyName, value);
       },
       setSurfaceAnimationStyleProperty: (propertyName, value) => {
         const surface = this.root.querySelector<HTMLElement>(
-            `.${CssClasses.SURFACE_ANIMATION}`);
+          `.${CssClasses.SURFACE_ANIMATION}`,
+        );
         surface?.style.setProperty(propertyName, value);
       },
       getViewportWidth: () => window.innerWidth,
@@ -229,8 +249,12 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
       },
       setAnchorAttribute: (attr, value) => {
         if (this.anchorElem) {
-          safeElement.setPrefixedAttribute(
-              ARIA_ATTR_PREFIX, this.anchorElem, attr, value);
+          setElementPrefixedAttribute(
+            ARIA_ATTR_PREFIX,
+            this.anchorElem,
+            attr,
+            value,
+          );
         }
       },
       isRTL: () => getComputedStyle(this.root).direction === 'rtl',
@@ -279,7 +303,8 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
       },
       getTooltipCaretBoundingRect: () => {
         const caret = this.root.querySelector<HTMLElement>(
-            `.${CssClasses.TOOLTIP_CARET_TOP}`);
+          `.${CssClasses.TOOLTIP_CARET_TOP}`,
+        );
         if (!caret) {
           return null;
         }
@@ -287,9 +312,11 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
       },
       setTooltipCaretStyle: (propertyName, value) => {
         const topCaret = this.root.querySelector<HTMLElement>(
-            `.${CssClasses.TOOLTIP_CARET_TOP}`);
+          `.${CssClasses.TOOLTIP_CARET_TOP}`,
+        );
         const bottomCaret = this.root.querySelector<HTMLElement>(
-            `.${CssClasses.TOOLTIP_CARET_BOTTOM}`);
+          `.${CssClasses.TOOLTIP_CARET_BOTTOM}`,
+        );
 
         if (!topCaret || !bottomCaret) {
           return;
@@ -300,9 +327,11 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
       },
       clearTooltipCaretStyles: () => {
         const topCaret = this.root.querySelector<HTMLElement>(
-            `.${CssClasses.TOOLTIP_CARET_TOP}`);
+          `.${CssClasses.TOOLTIP_CARET_TOP}`,
+        );
         const bottomCaret = this.root.querySelector<HTMLElement>(
-            `.${CssClasses.TOOLTIP_CARET_BOTTOM}`);
+          `.${CssClasses.TOOLTIP_CARET_BOTTOM}`,
+        );
 
         if (!topCaret || !bottomCaret) {
           return;