diff --git a/packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts b/packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts
index c7591e8aac6..f2f00b0ee62 100644
--- a/packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts
+++ b/packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts
@@ -21,6 +21,10 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * MegaMenu Category Group Description.
  *
  * @element c4d-megamenu-category-group-desc
+ * @csspart heading - The h2 element of the left navigation menu category heading. Usage: `c4d-left-nav-menu-category-heading::part(heading)`
+ * @csspart heading-link - The link element of the left navigation menu category heading. Usage: `c4d-left-nav-menu-category-heading::part(heading-link)`
+ * @csspart container - The side navigation heading container. Usage: `c4d-left-nav-menu-category-heading::part(container)`
+ * @csspart description - The description container within the side navigation heading. Usage: `c4d-left-nav-menu-category-heading::part(description)`
  */
 @customElement(`${c4dPrefix}-left-nav-menu-category-heading`)
 class C4DLeftNavMenuCategoryHeading extends LitElement {
@@ -52,8 +56,9 @@ class C4DLeftNavMenuCategoryHeading extends LitElement {
 
     return url
       ? html`
-          <h2 class="${classMap(headingClasses)}">
+          <h2 part="heading" class="${classMap(headingClasses)}">
             <a
+              part="heading-link"
               href="${url}"
               class="${prefix}--side-nav__heading-title"
               data-attribute1="headerNav"
@@ -63,14 +68,20 @@ class C4DLeftNavMenuCategoryHeading extends LitElement {
             </a>
           </h2>
         `
-      : html` <h2 class="${classMap(headingClasses)}">${headingText}</h2> `;
+      : html`
+          <h2 part="heading" class="${classMap(headingClasses)}">
+            ${headingText}
+          </h2>
+        `;
   }
 
   render() {
     return html`
-      <div class="${prefix}--side-nav__heading">
+      <div part="container" class="${prefix}--side-nav__heading">
         ${this._renderHeading()}
-        <div class="${prefix}--side-nav__heading-description">
+        <div
+          part="description"
+          class="${prefix}--side-nav__heading-description">
           <slot></slot>
         </div>
       </div>
diff --git a/packages/web-components/src/components/masthead/left-nav-menu-section.ts b/packages/web-components/src/components/masthead/left-nav-menu-section.ts
index 47747722d69..e3e1e04bc78 100644
--- a/packages/web-components/src/components/masthead/left-nav-menu-section.ts
+++ b/packages/web-components/src/components/masthead/left-nav-menu-section.ts
@@ -25,6 +25,11 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * Masthead left nav menu section.
  *
  * @element c4d-left-nav-menu-section
+ * @csspart side-nav-submenu-container - The container for the submenu. Usage: `c4d-left-nav-menu-section::part(side-nav-submenu-container)`
+ * @csspart menu-item - The submenu item. Usage: `c4d-left-nav-menu-section::part(menu-item)`
+ * @csspart menu-link - The side navigation link. Usage: `c4d-left-nav-menu-section::part(menu-link)`
+ * @csspart menu-link-text - The text within the side navigation link. Usage: `c4d-left-nav-menu-section::part(menu-link-text back-button-text)`
+ * @csspart back-button - The back button. Usage: `c4d-left-nav-menu-section::part(back-button)`
  * @fires c4d-left-nav-menu-beingtoggled
  *   The custom event fired before this side nav menu is being toggled upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of toggling this side nav menu.
@@ -222,16 +227,20 @@ class C4DLeftNavMenuSection extends HostListenerMixin(FocusMixin(LitElement)) {
       showBackBtn,
     } = this;
     return html`
-      <ul>
+      <ul part="side-nav-submenu-container">
         ${showBackBtn
           ? html`
               <li
+                part="menu-item back-button-wrapper"
                 class="${prefix}--side-nav__menu-item ${prefix}--masthead__side-nav--submemu-back"
                 role="none">
                 <button
+                  part="menu-link back-button"
                   class="${prefix}--side-nav__link"
                   @click="${handleClickBack}">
-                  <span class="${prefix}--side-nav__link-text"
+                  <span
+                    part="menu-link-text back-button-text"
+                    class="${prefix}--side-nav__link-text"
                     >${ChevronLeft16()}${backButtonText}</span
                   >
                 </button>
diff --git a/packages/web-components/src/components/masthead/left-nav-menu.ts b/packages/web-components/src/components/masthead/left-nav-menu.ts
index 31159ad598b..c08d4cb1d61 100644
--- a/packages/web-components/src/components/masthead/left-nav-menu.ts
+++ b/packages/web-components/src/components/masthead/left-nav-menu.ts
@@ -26,6 +26,10 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  *   The custom event fired before this side nav menu is being toggled upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of toggling this side nav menu.
  * @fires c4d-left-nav-menu-toggled The custom event fired after this side nav menu is toggled upon a user gesture.
+ * @csspart side-nav-item-button - The button for the side navigation item. Usage: `c4d-left-nav-menu::part(side-nav-item-button)`
+ * @csspart side-nav-submenu-content - The content of the side navigation submenu. Usage: `c4d-left-nav-menu::part(side-nav-submenu-content)`
+ * @csspart side-nav-submenu-title - The title of the side navigation submenu. Usage: `c4d-left-nav-menu::part(side-nav-submenu-title)`
+ * @csspart side-nav-icon - The icon of the side navigation submenu. Usage: `c4d-left-nav-menu::part(side-nav-icon)`
  */
 @customElement(`${c4dPrefix}-left-nav-menu`)
 class C4DLeftNavMenu extends FocusMixin(LitElement) {
@@ -111,6 +115,7 @@ class C4DLeftNavMenu extends FocusMixin(LitElement) {
     return html`
       <div class="${prefix}--side-nav__item">
         <button
+          part="side-nav-item-button"
           type="button"
           aria-haspopup="true"
           aria-expanded="${expanded}"
@@ -119,9 +124,16 @@ class C4DLeftNavMenu extends FocusMixin(LitElement) {
           data-attribute1="headerNav"
           data-attribute2="${isSubitem ? 'TabHdline' : 'L0'}"
           data-attribute3="${title}">
-          <div class="${prefix}--side-nav__submenu-content">
-            <span class="${prefix}--side-nav__submenu-title">${title}</span>
+          <div
+            part="side-nav-submenu-content"
+            class="${prefix}--side-nav__submenu-content">
+            <span
+              part="side-nav-submenu-title"
+              class="${prefix}--side-nav__submenu-title"
+              >${title}</span
+            >
             <div
+              part="side-nav-icon"
               class="${prefix}--side-nav__icon ${prefix}--side-nav__icon--small ${prefix}--side-nav__submenu-chevron">
               ${ChevronDown16()}
             </div>
diff --git a/packages/web-components/src/components/masthead/left-nav-name.ts b/packages/web-components/src/components/masthead/left-nav-name.ts
index 67eea9312e3..08ad0f553ee 100644
--- a/packages/web-components/src/components/masthead/left-nav-name.ts
+++ b/packages/web-components/src/components/masthead/left-nav-name.ts
@@ -22,6 +22,7 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * The brand name UI in left nav.
  *
  * @element c4d-left-nav-name
+ * @csspart side-nav-submenu - The side navigation submenu. Usage: `c4d-left-nav-name::part(side-nav-submenu)`
  */
 @customElement(`${c4dPrefix}-left-nav-name`)
 class C4DLeftNavName extends CDSHeaderName {
@@ -48,6 +49,7 @@ class C4DLeftNavName extends CDSHeaderName {
         `;
     return html`
       <a
+        part="side-nav-submenu"
         class="${prefix}--side-nav__submenu ${prefix}--side-nav__submenu-platform"
         href="${ifDefined(href)}">
         ${namePrefixPart}
diff --git a/packages/web-components/src/components/masthead/masthead-contact.ts b/packages/web-components/src/components/masthead/masthead-contact.ts
index 228ff5e7756..ddf59caa99d 100644
--- a/packages/web-components/src/components/masthead/masthead-contact.ts
+++ b/packages/web-components/src/components/masthead/masthead-contact.ts
@@ -23,6 +23,7 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * The contact button UI in the masthead.
  *
  * @element c4d-masthead-contact
+ * @csspart contact-link -The masthead contact link. Usage `c4d-masthead-contact::part(contact-link)`
  */
 @customElement(`${c4dPrefix}-masthead-contact`)
 class C4DMastheadContact extends C4DMastheadProfile {
@@ -58,6 +59,7 @@ class C4DMastheadContact extends C4DMastheadProfile {
     const { triggerLabel, _handleClick: handleClick } = this;
     return html`
       <a
+        part="contact-link"
         href="javascript:void 0"
         class="${prefix}--header__menu-item ${prefix}--header__menu-title"
         aria-label="${ifDefined(triggerLabel)}"
diff --git a/packages/web-components/src/components/masthead/masthead-global-bar.ts b/packages/web-components/src/components/masthead/masthead-global-bar.ts
index 82236c379a4..0ab6427796c 100644
--- a/packages/web-components/src/components/masthead/masthead-global-bar.ts
+++ b/packages/web-components/src/components/masthead/masthead-global-bar.ts
@@ -24,6 +24,7 @@ const { stablePrefix: c4dPrefix } = settings;
  * The action bar in masthead.
  *
  * @element c4d-masthead-global-bar
+ * @csspart container -The ce header global container. Usage `c4d-masthead-global-bar::part(container)`
  */
 @customElement(`${c4dPrefix}-masthead-global-bar`)
 class C4DMastheadGlobalBar extends FocusMixin(
@@ -61,7 +62,11 @@ class C4DMastheadGlobalBar extends FocusMixin(
       [`${c4dPrefix}-ce--header__global__container--has-search-active`]:
         hasSearchActive,
     });
-    return html` <div class="${classes}"><slot></slot></div> `;
+    return html`
+      <div part="container" class="${classes}">
+        <slot></slot>
+      </div>
+    `;
   }
 
   /**
diff --git a/packages/web-components/src/components/masthead/masthead-l1-cta.ts b/packages/web-components/src/components/masthead/masthead-l1-cta.ts
index 60fd488f06c..a89be2e0389 100644
--- a/packages/web-components/src/components/masthead/masthead-l1-cta.ts
+++ b/packages/web-components/src/components/masthead/masthead-l1-cta.ts
@@ -30,6 +30,9 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  *
  * @element c4d-masthead-l1-cta
  * @slot cta-text - The CTA text
+ * @csspart inner-wrapper-desktop - The inner wrapper for the desktop view. Usage: `c4d-masthead-l1-cta::part(inner-wrapper-desktop)`
+ * @csspart l1-button - The button element for CTA. Usage: `c4d-masthead-l1-cta::part(l1-button)`
+ * @csspart l1-link - The link element for CTA. Usage: `c4d-masthead-l1-cta::part(l1-link)`
  */
 @customElement(`${c4dPrefix}-masthead-l1-cta`)
 class C4DMastheadL1Cta extends StableSelectorMixin(LitElement) {
@@ -94,7 +97,11 @@ class C4DMastheadL1Cta extends StableSelectorMixin(LitElement) {
     // Adds inner wrapper markup in desktop displays.
     const desktopWrapper = (markup: TemplateResult) => {
       if (!isMobileVersion) {
-        return html` <div class="${classname}-inner">${markup}</div> `;
+        return html`
+          <div part="inner-wrapper-desktop" class="${classname}-inner">
+            ${markup}
+          </div>
+        `;
       }
       return markup;
     };
@@ -117,7 +124,10 @@ class C4DMastheadL1Cta extends StableSelectorMixin(LitElement) {
     if (type && iconMap.has(type as L1_CTA_TYPES)) {
       const icon = iconMap.get(type as L1_CTA_TYPES);
       return html`
-        <button class="${classname}" data-ibm-contact="${type}-link">
+        <button
+          part="l1-button"
+          class="${classname}"
+          data-ibm-contact="${type}-link">
           ${desktopWrapper(html`
             <slot name="cta-text"></slot>
             ${icon}
@@ -129,7 +139,7 @@ class C4DMastheadL1Cta extends StableSelectorMixin(LitElement) {
     if (href) {
       const icon = isMobileVersion ? ArrowRight16() : '';
       return html`
-        <a class="${classname}" href="${href}">
+        <a part="l1-link" class="${classname}" href="${href}">
           ${desktopWrapper(html`<slot name="cta-text"></slot>${icon}`)}
         </a>
       `;
diff --git a/packages/web-components/src/components/masthead/masthead-l1-name.ts b/packages/web-components/src/components/masthead/masthead-l1-name.ts
index 4feaebd4220..314121eb05c 100644
--- a/packages/web-components/src/components/masthead/masthead-l1-name.ts
+++ b/packages/web-components/src/components/masthead/masthead-l1-name.ts
@@ -20,6 +20,8 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * Masthead.
  *
  * @element c4d-masthead-l1-name
+ * @csspart l1-name-title - The title element. Usage: `c4d-masthead-l1-name::part(l1-name-title)`
+ * @csspart l1-name-link - The link element. Usage: `c4d-masthead-l1-name::part(l1-name-link)`
  */
 @customElement(`${c4dPrefix}-masthead-l1-name`)
 class C4DMastheadL1Name extends StableSelectorMixin(LitElement) {
@@ -37,8 +39,8 @@ class C4DMastheadL1Name extends StableSelectorMixin(LitElement) {
 
   render() {
     return html`
-      <span class="${prefix}--masthead__l1-name-title">
-        <a href="${this.url}">${this.title}</a>
+      <span part="l1-name-title" class="${prefix}--masthead__l1-name-title">
+        <a part="l1-name-link" href="${this.url}">${this.title}</a>
       </span>
     `;
   }
diff --git a/packages/web-components/src/components/masthead/masthead-l1.ts b/packages/web-components/src/components/masthead/masthead-l1.ts
index 914c3188798..a73fa82dd62 100644
--- a/packages/web-components/src/components/masthead/masthead-l1.ts
+++ b/packages/web-components/src/components/masthead/masthead-l1.ts
@@ -84,6 +84,26 @@ function handleDropdownClose(event: FocusEvent | KeyboardEvent) {
  * Masthead.
  *
  * @element c4d-masthead-l1
+ * @csspart l1-menu-container-inner - The container that wraps the L1 menu items for scrolling purposes. Usage: `c4d-masthead-l1::part(l1-menu-container-inner)`
+ * @csspart masthead-l1-menu - The container element for the L1 menu items. Usage: `c4d-masthead-l1::part(masthead-l1-menu)`
+ * @csspart l1-menu-first-item - The first item in the L1 menu. Usage: `c4d-masthead-l1::part(l1-menu-first-item)`
+ * @csspart l1-menu-last-item - The last item in the L1 menu. Usage: `c4d-masthead-l1::part(l1-menu-last-item)`
+ * @csspart l1-menu-container-scroller - The buttons used for scrolling the L1 menu items. Usage: `c4d-masthead-l1::part(l1-menu-container-scroller)`
+ * @csspart l1-title-button - The title button in the L1 masthead. Usage: `c4d-masthead-l1::part(l1-title-button)`
+ * @csspart l1-dropdown - The dropdown items in the L1 masthead. Usage: `c4d-masthead-l1::part(l1-dropdown)`
+ * @csspart l1-dropdown-viewall - The "view all" link in the L1 dropdown. Usage: `c4d-masthead-l1::part(l1-dropdown-viewall)`
+ * @csspart l1-dropdown-announcement - The announcement in the L1 dropdown. Usage: `c4d-masthead-l1::part(l1-dropdown-announcement)`
+ * @csspart l1-dropdown-section - The sections in the L1 dropdown. Usage: `c4d-masthead-l1::part(l1-dropdown-section)`
+ * @csspart l1-dropdown-menu-items - The menu items in the L1 dropdown. Usage: `c4d-masthead-l1::part(l1-dropdown-menu-items)`
+ * @csspart l1-dropdown-menu-item - A single menu item in the L1 dropdown. Usage: `c4d-masthead-l1::part(l1-dropdown-menu-item)`
+ * @csspart l1-dropdown-item-ul - The item list in the L1 dropdown. Usage: `c4d-masthead-l1::part(l1-dropdown-item-ul)`
+ * @csspart l1-dropdown-item-li - The list item in the L1 dropdown. Usage: `c4d-masthead-l1::part(l1-dropdown-item-li)`
+ * @csspart l1-dropdown-item-link - The item link in the L1 dropdown. Usage: `c4d-masthead-l1::part(l1-dropdown-item-link)`
+ * @csspart l1-dropdown-item-link--heading - The item link in the L1 dropdown that wraps headings. Usage: `c4d-masthead-l1::part(l1-dropdown-item-link--heading)`
+ * @csspart l1-dropdown-subsection - The subsection in the L1 dropdown. Usage: `c4d-masthead-l1::part(l1-dropdown-subsection)`
+ * @csspart l1-dropdown-item - The dropdown item in the L1 dropdown. Usage: `c4d-masthead-l1::part(l1-dropdown-item)`
+ * @csspart l1-dropdown-login-link - The login link in the L1 dropdown. Usage: `c4d-masthead-l1::part(l1-dropdown-login-link)`
+ * @csspart l1-dropdown-links - A group of l1 dropdown links. Usage: `c4d-masthead-l1::part(l1-dropdown-links)`
  * @slot brand - The left hand area.
  * @slot nav - The nav content.
  * @slot profile - The right hand area.
@@ -341,45 +361,64 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
 
     return html`
       <div
+        part="masthead-l1-menu-container-mask"
         class="${prefix}--masthead__l1-menu-container-mask ${prefix}--masthead__l1-menu-container-mask--start"></div>
       ${!title || !url
         ? undefined
         : html`
-            <div class="${prefix}--masthead__background-wrapper">
-              <a class="${prefix}--masthead__l1-title" href="${url}"
+            <div
+              part="masthead-background-wrapper"
+              class="${prefix}--masthead__background-wrapper">
+              <a
+                part="masthead-l1-title"
+                class="${prefix}--masthead__l1-title"
+                href="${url}"
                 >${title}</a
               >
             </div>
           `}
-      <div class="${prefix}--masthead__l1-menu-container-outer">
+      <div
+        part="masthead-l1-menu-container-outer"
+        class="${prefix}--masthead__l1-menu-container-outer">
         <button
+          part="l1-menu-container-scroller-button"
           class="${prefix}--masthead__l1-menu-container-scroller"
           id="scroll-prev"
           @click=${scrollL1TopNav}>
-          <div class="${prefix}--masthead__l1-menu-container-scroller-inner">
+          <div
+            part="l1-menu-container-scroller-inner"
+            class="${prefix}--masthead__l1-menu-container-scroller-inner">
             ${direction === 'ltr' ? CaretLeft20() : CaretRight20()}
           </div>
         </button>
-        <div class="${prefix}--masthead__l1-menu-container-inner">
-          <ul class="${prefix}--masthead__l1-menu">
+        <div
+          part="l1-menu-container-inner"
+          class="${prefix}--masthead__l1-menu-container-inner">
+          <ul part="l1-menu" class="${prefix}--masthead__l1-menu">
             ${(menuItems ?? []).map((menuItem) =>
               this._renderL1TopNavDropDowns(menuItem)
             )}
           </ul>
         </div>
         <button
+          part="l1-menu-container-scroller"
           class="${prefix}--masthead__l1-menu-container-scroller"
           id="scroll-next"
           @click=${scrollL1TopNav}>
-          <div class="${prefix}--masthead__l1-menu-container-scroller-inner">
+          <div
+            part="l1-menu-container-scroller-inner"
+            class="${prefix}--masthead__l1-menu-container-scroller-inner">
             ${direction === 'ltr' ? CaretRight20() : CaretLeft20()}
           </div>
         </button>
       </div>
       ${login && login.url && login.title
         ? html`
-            <div class="${prefix}--masthead__background-wrapper">
+            <div
+              part="masthead-background-wrapper"
+              class="${prefix}--masthead__background-wrapper">
               <a
+                part="masthead-l1-login"
                 class="${prefix}--masthead__l1-login"
                 href="${ifDefined(login.url)}"
                 >${login.title}</a
@@ -389,6 +428,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
         : ''}
       ${this._renderCta()}
       <div
+        part="masthead-l1-menu-container-mask"
         class="${prefix}--masthead__l1-menu-container-mask ${prefix}--masthead__l1-menu-container-mask--end"></div>
     `;
   }
@@ -408,8 +448,9 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
 
     if (!submenu && url) {
       return html`
-        <li>
+        <li part="masthead-l1-item">
           <a
+            part="masthead-l1-item-link"
             class="${prefix}--masthead__l1-item"
             href="${url}"
             @focusin=${handleTopNavFocusIn}
@@ -419,8 +460,9 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
       `;
     } else if (!submenu) {
       return html`
-        <li>
+        <li part="masthead-l1-item">
           <span
+            part="masthead-l1-item-span"
             class="${prefix}--masthead__l1-item"
             @focusin=${handleTopNavFocusIn}
             >${title}</span
@@ -447,24 +489,29 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
 
     return html`
       <li
+        part="masthead-l1-item"
         @focusout=${handleDropdownClose}
         @keydown=${handleDropdownClose}
         tabindex="-1">
         <button
+          part="masthead-l1-item-button"
           class="${prefix}--masthead__l1-item"
           @click=${toggleSubsection}
           @focusin=${handleTopNavFocusIn}>
           ${title}${ChevronDown16()}
         </button>
         <div
+          part="l1-dropdown"
           data-dropdown-target
           class="${prefix}--masthead__l1-dropdown ${prefix}--masthead__l1-dropdown__${columns}-col">
           ${announcement
-            ? html`<div class="${prefix}--masthead__l1-dropdown-announcement">
+            ? html`<div
+                part="l1-dropdown-announcement"
+                class="${prefix}--masthead__l1-dropdown-announcement">
                 ${unsafeHTML(announcement)}
               </div>`
             : ''}
-          <div class="${dropdownClasses}">
+          <div part="l1-dropdown-links" class="${dropdownClasses}">
             ${hasWideColumn && wideColumnFirst
               ? this._renderL1DropdownSections(wideColumns, hasWideColumn, true)
               : ''}
@@ -479,6 +526,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
           </div>
           ${footer
             ? html`<a
+                part="l1-dropdown-viewall"
                 class="${prefix}--masthead__l1-dropdown-viewall"
                 href="${footer.url}"
                 >${footer.title}${ArrowRight16()}</a
@@ -501,20 +549,26 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
       const { heading, items } = section;
 
       return html`
-        <div class="${prefix}--masthead__l1-dropdown-section">
+        <div
+          part="l1-dropdown-section"
+          class="${prefix}--masthead__l1-dropdown-section">
           ${heading ? html`${this._renderL1SubSectionHeading(heading)}` : ''}
           ${items
-            ? html` <ul class="${prefix}--masthead__l1-dropdown-menu-items">
+            ? html` <ul
+                part="l1-dropdown-menu-items"
+                class="${prefix}--masthead__l1-dropdown-menu-items">
                 ${items.map((item) => {
                   const { title, url, description } = item;
 
                   const linkContents = description
                     ? html`
                         <span
+                          part="l1-dropdown-item-title-span"
                           class="${prefix}--masthead__l1-dropdown-item-title"
                           >${title}</span
                         >
                         <span
+                          part="l1-dropdown-item-description-span"
                           class="${prefix}--masthead__l1-dropdown-item-description"
                           >${description}</span
                         >
@@ -522,8 +576,9 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
                     : html` ${title} `;
 
                   return html`
-                    <li>
+                    <li part="l1-dropdown-menu-item">
                       <a
+                        part="l1-dropdown-item-link"
                         class="${prefix}--masthead__l1-dropdown-item"
                         href="${url}">
                         ${linkContents}
@@ -559,13 +614,22 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
     const { _toggleSubsection: toggleSubsection } = this;
 
     return html`
-      <button class="${prefix}--masthead__l1-title" @click=${toggleSubsection}>
+      <button
+        part="l1-title-button"
+        class="${prefix}--masthead__l1-title"
+        @click=${toggleSubsection}>
         ${title}${ChevronDown16()}
       </button>
-      <ul data-dropdown-target class="${prefix}--masthead__l1-dropdown">
+      <ul
+        part="l1-dropdown"
+        data-dropdown-target
+        class="${prefix}--masthead__l1-dropdown">
         ${url
           ? html` <li>
-              <a class="${prefix}--masthead__l1-dropdown-item" href="${url}">
+              <a
+                part="l1-dropdown-item"
+                class="${prefix}--masthead__l1-dropdown-item"
+                href="${url}">
                 ${overviewText}
               </a>
             </li>`
@@ -574,6 +638,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
         ${login && login.url && login.title
           ? html` <li>
               <a
+                part="l1-dropdown-login-link"
                 class="${prefix}--masthead__l1-dropdown-login"
                 href="${ifDefined(login.url)}">
                 ${login.title}${ArrowRight16()}
@@ -598,7 +663,10 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
     if (!submenu && url) {
       return html`
         <li>
-          <a class="${prefix}--masthead__l1-dropdown-item" href="${url}"
+          <a
+            part="l1-dropdown-item-link"
+            class="${prefix}--masthead__l1-dropdown-item"
+            href="${url}"
             >${title}</a
           >
         </li>
@@ -606,7 +674,11 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
     } else if (!submenu) {
       return html`
         <li>
-          <span class="${prefix}--masthead__l1-dropdown-item">${title}</span>
+          <span
+            part="l1-dropdown-item-span"
+            class="${prefix}--masthead__l1-dropdown-item"
+            >${title}</span
+          >
         </li>
       `;
     }
@@ -616,15 +688,19 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
     return html`
       <li>
         <button
+          part="l1-dropdown-item-button"
           class="${prefix}--masthead__l1-dropdown-item"
           @click=${toggleSubsection}>
           ${title}${ChevronDown16()}
         </button>
         <div
+          part="l1-dropdown-subsection"
           data-dropdown-target
           class="${prefix}--masthead__l1-dropdown-subsection">
           ${announcement
-            ? html`<div class="${prefix}--masthead__l1-dropdown-announcement">
+            ? html`<div
+                part="l1-dropdown-announcement"
+                class="${prefix}--masthead__l1-dropdown-announcement">
                 ${unsafeHTML(announcement)}
               </div>`
             : ''}
@@ -637,12 +713,13 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
                     ? html`${this._renderL1SubSectionHeading(heading)}`
                     : ''}
                   ${items
-                    ? html` <ul>
+                    ? html` <ul part="l1-dropdown-item-ul">
                         ${items.map((item) => {
                           const { title, url } = item;
 
-                          return html` <li>
+                          return html` <li part="l1-dropdown-item-li">
                             <a
+                              part="l1-dropdown-item-link"
                               class="${prefix}--masthead__l1-dropdown-item"
                               href="${url}">
                               ${title}
@@ -656,7 +733,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
             : ''}
           ${footer
             ? html`
-                <a
+                <a part="l1-dropdown-viewall"
                   class="${prefix}--masthead__l1-dropdown-viewall"
                   href="${footer.url}"
                 >
@@ -869,6 +946,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
     const headingContent = heading.url
       ? html`
           <a
+            part="l1-dropdown-item-link l1-dropdown-item-link--heading"
             class="${prefix}--masthead__l1-dropdown-item"
             href="${heading.url}">
             ${heading.title}${isMobileVersion ? ArrowRight16() : ArrowRight20()}
@@ -886,31 +964,41 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
     switch (heading.headingLevel) {
       case 2:
         renderedHeading = html`
-          <h2 class=${headingClasses}>${headingContent}</h2>
+          <h2 part="masthead-l1-h2-heading" class=${headingClasses}>
+            ${headingContent}
+          </h2>
           ${headingDesc}
         `;
         break;
       case 3:
         renderedHeading = html`
-          <h3 class=${headingClasses}>${headingContent}</h3>
+          <h3 part="masthead-l1-h3-heading" class=${headingClasses}>
+            ${headingContent}
+          </h3>
           ${headingDesc}
         `;
         break;
       case 4:
         renderedHeading = html`
-          <h4 class=${headingClasses}>${headingContent}</h4>
+          <h4 part="masthead-l1-h4-heading" class=${headingClasses}>
+            ${headingContent}
+          </h4>
           ${headingDesc}
         `;
         break;
       case 5:
         renderedHeading = html`
-          <h5 class=${headingClasses}>${headingContent}</h5>
+          <h5 part="masthead-l1-h5-heading" class=${headingClasses}>
+            ${headingContent}
+          </h5>
           ${headingDesc}
         `;
         break;
       case 6:
         renderedHeading = html`
-          <h6 class=${headingClasses}>${headingContent}</h6>
+          <h6 part="masthead-l1-h6-heading" class=${headingClasses}>
+            ${headingContent}
+          </h6>
           ${headingDesc}
         `;
         break;
@@ -960,7 +1048,9 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
   render() {
     const { isMobileVersion } = this;
     return html`
-      <div class="${prefix}--masthead__l1-inner-container">
+      <div
+        part="masthead-l1-inner-container"
+        class="${prefix}--masthead__l1-inner-container">
         ${isMobileVersion
           ? html` ${this._renderL1MobileNav()} `
           : html` ${this._renderL1TopNav()} `}
diff --git a/packages/web-components/src/components/masthead/masthead-menu-button.ts b/packages/web-components/src/components/masthead/masthead-menu-button.ts
index a0e2b80422f..68dbc6d5f7b 100644
--- a/packages/web-components/src/components/masthead/masthead-menu-button.ts
+++ b/packages/web-components/src/components/masthead/masthead-menu-button.ts
@@ -25,6 +25,10 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * Toggle button for masthead left nav.
  *
  * @element c4d-masthead-menu-button
+ * @csspart sentinel-button - The sentinel button for managing focus.
+ * @csspart ce-header-menu-trigger-container - Container for the menu trigger button.
+ * @csspart sentinel-button--start - The start sentinel button for managing focus. Usage: `c4d-masthead-menu-button::part(sentinel-button--start)`
+ * @csspart sentinel-button--end - The end sentinel button for managing focus. Usage: `c4d-masthead-menu-button::part(sentinel-button--end)`
  */
 @customElement(`${c4dPrefix}-masthead-menu-button`)
 class C4DMastheadMenuButton extends HostListenerMixin(CDSHeaderMenuButton) {
@@ -115,6 +119,7 @@ class C4DMastheadMenuButton extends HostListenerMixin(CDSHeaderMenuButton) {
   private _renderSentinel = (side: String) => {
     return html`
       <button
+        part="sentinel-button sentinel-button--${side}"
         id="${side}-sentinel"
         type="button"
         class="${prefix}--visually-hidden"></button>
@@ -135,7 +140,7 @@ class C4DMastheadMenuButton extends HostListenerMixin(CDSHeaderMenuButton) {
     const startSentinel = active ? renderSentinel('start') : '';
     const endSentinel = active ? renderSentinel('end') : '';
     return html`
-      <div class="${classes}">
+      <div part="ce-header-menu-trigger-container" class="${classes}">
         ${startSentinel}${super.render()}${endSentinel}
       </div>
     `;
diff --git a/packages/web-components/src/components/masthead/masthead-profile.ts b/packages/web-components/src/components/masthead/masthead-profile.ts
index fa24b92f651..d4be1fb36cd 100644
--- a/packages/web-components/src/components/masthead/masthead-profile.ts
+++ b/packages/web-components/src/components/masthead/masthead-profile.ts
@@ -26,6 +26,7 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * The profile menu UI in the masthead.
  *
  * @element c4d-masthead-profile
+ * @csspart profile-link - The masthead contact link. Usage: `c4d-masthead-contact::part(profile-link)`
  */
 @customElement(`${c4dPrefix}-masthead-profile`)
 class C4DMastheadProfile extends HostListenerMixin(
@@ -112,6 +113,7 @@ class C4DMastheadProfile extends HostListenerMixin(
     } = this;
     return html`
       <a
+        part="profile-link"
         role="button"
         tabindex="0"
         class="${prefix}--header__menu-item ${prefix}--header__menu-title"
diff --git a/packages/web-components/src/components/masthead/masthead.ts b/packages/web-components/src/components/masthead/masthead.ts
index bed226dee3a..e13b54b74bb 100644
--- a/packages/web-components/src/components/masthead/masthead.ts
+++ b/packages/web-components/src/components/masthead/masthead.ts
@@ -20,6 +20,10 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * Masthead.
  *
  * @element c4d-masthead
+ * @csspart l0 - The Masthead L0. Usage: `c4d-masthead::part(l0)`
+ * @csspart header - The header. Usage: `c4d-masthead::part(header)`
+ * @csspart header-search - The header search. Usage: `c4d-masthead::part(header-search)`
+ * @csspart header-nav-container - The header nav container. Usage: `c4d-masthead::part(header-nav-container)`
  * @slot brand - The left hand area.
  * @slot nav - The nav content.
  * @slot profile - The right hand area.
@@ -48,11 +52,13 @@ class C4DMasthead extends StableSelectorMixin(LitElement) {
 
   render() {
     return html`
-      <div class="${prefix}--masthead__l0">
-        <div class="${prefix}--header">
+      <div part="l0" class="${prefix}--masthead__l0">
+        <div part="header" class="${prefix}--header">
           <slot name="brand"></slot>
-          <div class="${prefix}--header__search">
-            <div class="${prefix}--header__nav-container">
+          <div part="header-search" class="${prefix}--header__search">
+            <div
+              part="header-nav-container"
+              class="${prefix}--header__nav-container">
               <slot></slot>
             </div>
             <slot name="search"></slot>
diff --git a/packages/web-components/src/components/masthead/megamenu-category-group.ts b/packages/web-components/src/components/masthead/megamenu-category-group.ts
index 627e2fef741..8a2c130b9ef 100644
--- a/packages/web-components/src/components/masthead/megamenu-category-group.ts
+++ b/packages/web-components/src/components/masthead/megamenu-category-group.ts
@@ -20,6 +20,10 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * MegaMenu category group
  *
  * @element c4d-megamenu-category-group
+ * @csspart shield - The shield element of the megamenu category group. Usage: `c4d-megamenu-category-group::part(shield)`
+ * @csspart content-wrapper - The content wrapper of the megamenu category group. Usage: `c4d-megamenu-category-group::part(content-wrapper)`
+ * @csspart heading - The heading of the megamenu category group. Usage: `c4d-megamenu-category-group::part(heading)`
+ * @csspart content - The content of the megamenu category group. Usage: `c4d-megamenu-category-group::part(content)`
  */
 @customElement(`${c4dPrefix}-megamenu-category-group`)
 class C4DMegaMenuCategoryGroup extends LitElement {
@@ -37,13 +41,20 @@ class C4DMegaMenuCategoryGroup extends LitElement {
 
   render() {
     return html`
-      <div class="${prefix}--masthead__megamenu__category-group-shield">
+      <div
+        part="shield"
+        class="${prefix}--masthead__megamenu__category-group-shield">
         <div
+          part="content-wrapper"
           class="${prefix}--masthead__megamenu__category-group-content-wrapper">
-          <div class="${prefix}--masthead__megamenu__category-group-heading">
+          <div
+            part="heading"
+            class="${prefix}--masthead__megamenu__category-group-heading">
             <slot name="heading"></slot>
           </div>
-          <div class="${prefix}--masthead__megamenu__category-group-content">
+          <div
+            part="content"
+            class="${prefix}--masthead__megamenu__category-group-content">
             <slot></slot>
           </div>
         </div>
diff --git a/packages/web-components/src/components/masthead/megamenu-heading.ts b/packages/web-components/src/components/masthead/megamenu-heading.ts
index 5c71cc6a295..b869f777bdf 100644
--- a/packages/web-components/src/components/masthead/megamenu-heading.ts
+++ b/packages/web-components/src/components/masthead/megamenu-heading.ts
@@ -21,6 +21,13 @@ const { stablePrefix: c4dPrefix } = settings;
  * MegaMenu Heading.
  *
  * @element c4d-megamenu-heading
+ * @csspart heading-link - The link element of the megamenu heading. Usage: `c4d-megamenu-heading::part(heading-link)`
+ * @csspart heading-h2 - The h2 element of the megamenu heading. Usage: `c4d-megamenu-heading::part(heading-h2)`
+ * @csspart heading-h3 - The h3 element of the megamenu heading. Usage: `c4d-megamenu-heading::part(heading-h3)`
+ * @csspart heading-h4 - The h4 element of the megamenu heading. Usage: `c4d-megamenu-heading::part(heading-h4)`
+ * @csspart heading-h5 - The h5 element of the megamenu heading. Usage: `c4d-megamenu-heading::part(heading-h5)`
+ * @csspart heading-h6 - The h6 element of the megamenu heading. Usage: `c4d-megamenu-heading::part(heading-h6)`
+ * @csspart heading-span - The span element containing slotted content. Usage: `c4d-megamenu-heading::part(heading-span)`
  */
 @customElement(`${c4dPrefix}-megamenu-heading`)
 class C4DMegaMenuHeading extends HostListenerMixin(LitElement) {
@@ -51,6 +58,7 @@ class C4DMegaMenuHeading extends HostListenerMixin(LitElement) {
     const { _arrowIcon } = this;
     return html`
       <a
+        part="heading-link"
         href="${this.href}"
         data-attribute1="headerNav"
         data-attribute2="FlatHdline"
@@ -76,23 +84,33 @@ class C4DMegaMenuHeading extends HostListenerMixin(LitElement) {
     switch (headingLevel) {
       case 3:
         return html`
-          <h3 ?data-has-href="${hasHref}">${this.renderHeadingInner()}</h3>
+          <h3 part="heading-h3" ?data-has-href="${hasHref}">
+            ${this.renderHeadingInner()}
+          </h3>
         `;
       case 4:
         return html`
-          <h4 ?data-has-href="${hasHref}">${this.renderHeadingInner()}</h4>
+          <h4 part="heading-h4" ?data-has-href="${hasHref}">
+            ${this.renderHeadingInner()}
+          </h4>
         `;
       case 5:
         return html`
-          <h5 ?data-has-href="${hasHref}">${this.renderHeadingInner()}</h5>
+          <h5 part="heading-h5" ?data-has-href="${hasHref}">
+            ${this.renderHeadingInner()}
+          </h5>
         `;
       case 6:
         return html`
-          <h6 ?data-has-href="${hasHref}">${this.renderHeadingInner()}</h6>
+          <h6 part="heading-h6" ?data-has-href="${hasHref}">
+            ${this.renderHeadingInner()}
+          </h6>
         `;
       default:
         return html`
-          <h2 ?data-has-href="${hasHref}">${this.renderHeadingInner()}</h2>
+          <h2 part="heading-h2" ?data-has-href="${hasHref}">
+            ${this.renderHeadingInner()}
+          </h2>
         `;
     }
   }
@@ -116,7 +134,7 @@ class C4DMegaMenuHeading extends HostListenerMixin(LitElement) {
   render() {
     return html`
       ${this.renderHeading()}
-      <span>
+      <span part="heading-span">
         <slot @slotchange=${this._handleSlotChange}></slot>
       </span>
     `;
diff --git a/packages/web-components/src/components/masthead/megamenu-right-navigation.ts b/packages/web-components/src/components/masthead/megamenu-right-navigation.ts
index 6229e6ec6bc..272b63b3e35 100644
--- a/packages/web-components/src/components/masthead/megamenu-right-navigation.ts
+++ b/packages/web-components/src/components/masthead/megamenu-right-navigation.ts
@@ -25,6 +25,12 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * MegaMenu right navigation section
  *
  * @element c4d-megamenu-right-navigation
+ * @csspart container - The container for the megamenu. Usage: `c4d-megamenu-right-navigation::part(container)`
+ * @csspart container-inner - The inner container of the megamenu. Usage: `c4d-megamenu-right-navigation::part(container-inner)`
+ * @csspart heading - The heading of the megamenu. Usage: `c4d-megamenu-right-navigation::part(heading)`
+ * @csspart categories - The categories section of the megamenu. Usage: `c4d-megamenu-right-navigation::part(categories)`
+ * @csspart view-all - The view all section of the megamenu. Usage: `c4d-megamenu-right-navigation::part(view-all)`
+ * @csspart view-all-border - The border for the view all section. Usage: `c4d-megamenu-right-navigation::part(view-all-border)`
  */
 @customElement(`${c4dPrefix}-megamenu-right-navigation`)
 class C4DMegaMenuRightNavigation extends StableSelectorMixin(LitElement) {
@@ -84,17 +90,23 @@ class C4DMegaMenuRightNavigation extends StableSelectorMixin(LitElement) {
 
   render() {
     return html`
-      <div class="${this._getClassNames()}">
-        <div class="${prefix}--masthead__megamenu-container-inner">
-          <div class="${prefix}--masthead__megamenu__heading">
+      <div part="container" class="${this._getClassNames()}">
+        <div
+          part="container-inner"
+          class="${prefix}--masthead__megamenu-container-inner">
+          <div part="heading" class="${prefix}--masthead__megamenu__heading">
             <slot name="heading"></slot>
           </div>
-          <div class="${prefix}--masthead__megamenu__categories">
+          <div
+            part="categories"
+            class="${prefix}--masthead__megamenu__categories">
             <slot @slotchange="${this._handleSlotChange}"></slot>
           </div>
         </div>
-        <div class="${prefix}--masthead__megamenu__view-all">
-          <span class="${prefix}--masthead__megamenu__view-all__border"></span>
+        <div part="view-all" class="${prefix}--masthead__megamenu__view-all">
+          <span
+            part="view-all-border"
+            class="${prefix}--masthead__megamenu__view-all__border"></span>
           <slot name="view-all"></slot>
         </div>
       </div>
diff --git a/packages/web-components/src/components/masthead/megamenu-tab.ts b/packages/web-components/src/components/masthead/megamenu-tab.ts
index 9bd2c5d1c52..a8733b3f10f 100644
--- a/packages/web-components/src/components/masthead/megamenu-tab.ts
+++ b/packages/web-components/src/components/masthead/megamenu-tab.ts
@@ -21,6 +21,7 @@ const { stablePrefix: c4dPrefix } = c4dSettings;
  * Megamenu Tab.
  *
  * @element c4d-megamenu-tab
+ * @csspart nav-link - The text input. Usage: `c4d-megamenu-tab::part(nav-link)`
  */
 @customElement(`${c4dPrefix}-megamenu-tab`)
 class C4DMegaMenuTab extends CDSTab {
@@ -39,6 +40,7 @@ class C4DMegaMenuTab extends CDSTab {
 
     return html`
       <button
+        part="nav-link"
         class="${prefix}--tabs__nav-link"
         role="tab"
         ?disabled="${disabled}"
diff --git a/packages/web-components/src/components/masthead/megamenu.ts b/packages/web-components/src/components/masthead/megamenu.ts
index 30fc8245689..5633bb88079 100644
--- a/packages/web-components/src/components/masthead/megamenu.ts
+++ b/packages/web-components/src/components/masthead/megamenu.ts
@@ -21,6 +21,8 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * MegaMenu
  *
  * @element c4d-megamenu
+ * @csspart container - The masthead megamenu container. Usage: c4d-megamenu::part(container)
+ * @csspart container-row - The masthead megamenu container row. Usage: c4d-megamenu::part(container-row)
  */
 @customElement(`${c4dPrefix}-megamenu`)
 class C4DMegaMenu extends StableSelectorMixin(LitElement) {
@@ -90,8 +92,9 @@ class C4DMegaMenu extends StableSelectorMixin(LitElement) {
 
   render() {
     return html`
-      <div class="${prefix}--masthead__megamenu__container">
+      <div part="container" class="${prefix}--masthead__megamenu__container">
         <div
+          part="container-row"
           class="${prefix}--masthead__megamenu__container--row ${prefix}--masthead__megamenu__container--row--${this
             .layout}">
           <slot></slot>
diff --git a/packages/web-components/src/components/masthead/top-nav-name.ts b/packages/web-components/src/components/masthead/top-nav-name.ts
index 9087c8bfae9..fb9c19f8785 100644
--- a/packages/web-components/src/components/masthead/top-nav-name.ts
+++ b/packages/web-components/src/components/masthead/top-nav-name.ts
@@ -21,6 +21,8 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * The brand name UI in top nav.
  *
  * @element c4d-top-nav-name
+ * @csspart name-prefix - The header name prefix. Usage: `c4d-top-nav-name::part(name-prefix)`
+ * @csspart name-link - The header name prefix. Usage: `c4d-top-nav-name::part(name-link)`
  */
 @customElement(`${c4dPrefix}-top-nav-name`)
 class C4DTopNavName extends C4DLeftNavName {
@@ -47,11 +49,15 @@ class C4DTopNavName extends C4DLeftNavName {
     const namePrefixPart = !namePrefix
       ? undefined
       : html`
-          <span class="${prefix}--header__name--prefix">${namePrefix}</span
+          <span part="name-prefix" class="${prefix}--header__name--prefix"
+            >${namePrefix}</span
           >&nbsp;
         `;
     return html`
-      <a class="${prefix}--header__name" href="${ifDefined(href)}"
+      <a
+        part="name-link"
+        class="${prefix}--header__name"
+        href="${ifDefined(href)}"
         >${namePrefixPart}<slot></slot
       ></a>
     `;
diff --git a/packages/web-components/src/components/masthead/top-nav.ts b/packages/web-components/src/components/masthead/top-nav.ts
index d99fb909a9e..2ce8384efba 100644
--- a/packages/web-components/src/components/masthead/top-nav.ts
+++ b/packages/web-components/src/components/masthead/top-nav.ts
@@ -53,6 +53,14 @@ function findLastIndex<T>(
  * @csspart menubar - The menu bar. Usage: `c4d-top-nav::part(menubar)`
  * @csspart prev-button - The button to go to the previous page. Usage: `c4d-top-nav::part(prev-button)`
  * @csspart next-button - The button to go to the next page. Usage: `c4d-top-nav::part(next-button)`
+ * @csspart header-nav-caret-left-container - The header nav caret left container. Usage: `c4d-top-nav::part(header-nav-caret-left-container)`
+ * @csspart header-nav-caret-left-gradient - The header nav caret left gradient. Usage: `c4d-top-nav::part(header-nav-caret-left-gradient)`
+ * @csspart header-nav-caret-right-container - The header nav caret right container. Usage: `c4d-top-nav::part(header-nav-caret-right-container)`
+ * @csspart ce-header-nav-content-container - The ce header nav content container. Usage: `c4d-top-nav::part(ce-header-nav-content-container)`
+ * @csspart header-nav-content-container - The header nav content container. Usage: `c4d-top-nav::part(header-nav-content)`
+ * @csspart header-nav-content - The header nav content. Usage: `c4d-top-nav::part(header-nav-content)`
+ * @csspart sub-content-right - The right sub content. Usage: `c4d-top-nav::part(sub-content-right)`
+ * @csspart sub-content-left - The left sub content. Usage: `c4d-top-nav::part(sub-content-left)`
  */
 @customElement(`${c4dPrefix}-top-nav`)
 class C4DTopNav extends StableSelectorMixin(HostListenerMixin(CDSHeaderNav)) {
@@ -548,8 +556,11 @@ class C4DTopNav extends StableSelectorMixin(HostListenerMixin(CDSHeaderNav)) {
       : html`
           ${pageIsRTL
             ? html`
-                <div class="${caretRightContainerClasses}">
+                <div
+                  part="header-nav-caret-left-container"
+                  class="${caretRightContainerClasses}">
                   <div
+                    part="header_nav-caret-left-gradient"
                     class="${prefix}--header__nav-caret-right-gradient"></div>
                   <button
                     part="next-button"
@@ -560,13 +571,19 @@ class C4DTopNav extends StableSelectorMixin(HostListenerMixin(CDSHeaderNav)) {
                     ${CaretLeft20()}
                   </button>
                 </div>
-                <div class="${c4dPrefix}-ce--header__nav-content-container">
-                  <div class="${prefix}--header__nav-content">
+                <div
+                  part="ce-header-nav-content-container"
+                  class="${c4dPrefix}-ce--header__nav-content-container">
+                  <div
+                    part="header-nav-content"
+                    class="${prefix}--header__nav-content">
                     <nav
                       part="nav"
                       class="${prefix}--header__nav"
                       aria-label="${ifDefined(this.navLabel)}">
-                      <div class="${prefix}--sub-content-right"></div>
+                      <div
+                        part="sub-content-right"
+                        class="${prefix}--sub-content-right"></div>
                       <div
                         part="menubar"
                         class="${prefix}--header__menu-bar"
@@ -575,11 +592,15 @@ class C4DTopNav extends StableSelectorMixin(HostListenerMixin(CDSHeaderNav)) {
                           @slotchange=${handleSlotChange}
                           @keydown="${handleOnKeyDown}"></slot>
                       </div>
-                      <div class="${prefix}--sub-content-left"></div>
+                      <div
+                        part="sub-content-left"
+                        class="${prefix}--sub-content-left"></div>
                     </nav>
                   </div>
                 </div>
-                <div class="${caretLeftContainerClasses}">
+                <div
+                  part="header-nav-caret-left-container"
+                  class="${caretLeftContainerClasses}">
                   <button
                     part="prev-button"
                     tabindex="-1"
@@ -588,11 +609,15 @@ class C4DTopNav extends StableSelectorMixin(HostListenerMixin(CDSHeaderNav)) {
                     @click="${paginateLeft}">
                     ${CaretRight20()}
                   </button>
-                  <div class="${prefix}--header__nav-caret-left-gradient"></div>
+                  <div
+                    part="header-nav-caret-left-gradient"
+                    class="${prefix}--header__nav-caret-left-gradient"></div>
                 </div>
               `
             : html`
-                <div class="${caretLeftContainerClasses}">
+                <div
+                  part="header-nav-caret-left-container"
+                  class="${caretLeftContainerClasses}">
                   <button
                     part="prev-button"
                     tabindex="-1"
@@ -601,15 +626,23 @@ class C4DTopNav extends StableSelectorMixin(HostListenerMixin(CDSHeaderNav)) {
                     @click="${paginateLeft}">
                     ${CaretLeft20()}
                   </button>
-                  <div class="${prefix}--header__nav-caret-left-gradient"></div>
+                  <div
+                    part="header_nav-caret-left-gradient"
+                    class="${prefix}--header__nav-caret-left-gradient"></div>
                 </div>
-                <div class="${c4dPrefix}-ce--header__nav-content-container">
-                  <div class="${prefix}--header__nav-content">
+                <div
+                  part="ce-header-nav-content-container"
+                  class="${c4dPrefix}-ce--header__nav-content-container">
+                  <div
+                    part="header-nav-content"
+                    class="${prefix}--header__nav-content">
                     <nav
                       part="nav"
                       class="${prefix}--header__nav"
                       aria-label="${ifDefined(this.navLabel)}">
-                      <div class="${prefix}--sub-content-left"></div>
+                      <div
+                        part="sub-content-left"
+                        class="${prefix}--sub-content-left"></div>
                       <div
                         part="menubar"
                         class="${prefix}--header__menu-bar"
@@ -618,12 +651,17 @@ class C4DTopNav extends StableSelectorMixin(HostListenerMixin(CDSHeaderNav)) {
                           @slotchange=${handleSlotChange}
                           @keydown="${handleOnKeyDown}"></slot>
                       </div>
-                      <div class="${prefix}--sub-content-right"></div>
+                      <div
+                        part="sub-content-right"
+                        class="${prefix}--sub-content-right"></div>
                     </nav>
                   </div>
                 </div>
-                <div class="${caretRightContainerClasses}">
+                <div
+                  part="header-nav-caret-right-container"
+                  class="${caretRightContainerClasses}">
                   <div
+                    part="header-nav-caret-right-gradient"
                     class="${prefix}--header__nav-caret-right-gradient"></div>
                   <button
                     part="next-button"
diff --git a/packages/web-components/tests/snapshots/c4d-left-nav-menu.md b/packages/web-components/tests/snapshots/c4d-left-nav-menu.md
index 5485eadc375..c2096695ad9 100644
--- a/packages/web-components/tests/snapshots/c4d-left-nav-menu.md
+++ b/packages/web-components/tests/snapshots/c4d-left-nav-menu.md
@@ -13,12 +13,22 @@
     data-attribute1="headerNav"
     data-attribute2="L0"
     data-attribute3=""
+    part="side-nav-item-button"
     type="button"
   >
-    <div class="cds--side-nav__submenu-content">
-      <span class="cds--side-nav__submenu-title">
+    <div
+      class="cds--side-nav__submenu-content"
+      part="side-nav-submenu-content"
+    >
+      <span
+        class="cds--side-nav__submenu-title"
+        part="side-nav-submenu-title"
+      >
       </span>
-      <div class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron">
+      <div
+        class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron"
+        part="side-nav-icon"
+      >
       </div>
     </div>
   </button>
@@ -37,13 +47,23 @@
     data-attribute1="headerNav"
     data-attribute2="L0"
     data-attribute3="title-foo"
+    part="side-nav-item-button"
     type="button"
   >
-    <div class="cds--side-nav__submenu-content">
-      <span class="cds--side-nav__submenu-title">
+    <div
+      class="cds--side-nav__submenu-content"
+      part="side-nav-submenu-content"
+    >
+      <span
+        class="cds--side-nav__submenu-title"
+        part="side-nav-submenu-title"
+      >
         title-foo
       </span>
-      <div class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron">
+      <div
+        class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron"
+        part="side-nav-icon"
+      >
       </div>
     </div>
   </button>
diff --git a/packages/web-components/tests/snapshots/c4d-masthead-profile.md b/packages/web-components/tests/snapshots/c4d-masthead-profile.md
index 57ff2f26084..fe9d8372086 100644
--- a/packages/web-components/tests/snapshots/c4d-masthead-profile.md
+++ b/packages/web-components/tests/snapshots/c4d-masthead-profile.md
@@ -10,6 +10,7 @@
   aria-label="User profile"
   class="cds--header__menu-item cds--header__menu-title"
   href="javascript:void 0"
+  part="masthead-profile-link"
   role="button"
   tabindex="0"
 >
@@ -29,6 +30,7 @@
   aria-label="User profile"
   class="cds--header__menu-item cds--header__menu-title"
   href="javascript:void 0"
+  part="masthead-profile-link"
   role="button"
   tabindex="0"
 >