diff --git a/packages/quark-react/package.json b/packages/quark-react/package.json
index 1ca3c9d0..13759cde 100644
--- a/packages/quark-react/package.json
+++ b/packages/quark-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@quarkd/quark-react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Web components react reactify",
   "types": "lib/index.d.ts",
   "typings": "lib/index.d.ts",
@@ -24,7 +24,7 @@
     "*.js"
   ],
   "dependencies": {
-    "quarkd": "2.0.0",
+    "quarkd": "2.0.1",
     "@quarkd/reactify": "^1.0.3"
   },
   "devDependencies": {
diff --git a/packages/quarkd/package.json b/packages/quarkd/package.json
index f028981f..727eb34f 100644
--- a/packages/quarkd/package.json
+++ b/packages/quarkd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quarkd",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Mobile UI Components built on Web Components.",
   "main": "lib/index.js",
   "module": "lib/index.js",
diff --git a/packages/quarkd/src/actionsheet/index.tsx b/packages/quarkd/src/actionsheet/index.tsx
index c3d24861..2670ad28 100644
--- a/packages/quarkd/src/actionsheet/index.tsx
+++ b/packages/quarkd/src/actionsheet/index.tsx
@@ -169,6 +169,7 @@ class QuarkActionSheet extends QuarkElement {
         class="quark-actionsheet"
         ref={this.wrap}
         onClick={this.handleContainerClick}
+        part="root"
       >
         {this.title && (
           <div
diff --git a/packages/quarkd/src/badge/index.tsx b/packages/quarkd/src/badge/index.tsx
index 0ef55091..70b48208 100644
--- a/packages/quarkd/src/badge/index.tsx
+++ b/packages/quarkd/src/badge/index.tsx
@@ -73,7 +73,7 @@ class QuarkBadge extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-badge">
+      <div class="quark-badge" part="root">
         <div class={this.classNames} part="content">
           {this.renderContent()}
         </div>
diff --git a/packages/quarkd/src/button/index.tsx b/packages/quarkd/src/button/index.tsx
index 09211cf0..7b05db66 100644
--- a/packages/quarkd/src/button/index.tsx
+++ b/packages/quarkd/src/button/index.tsx
@@ -93,7 +93,7 @@ class QuarkButton extends QuarkElement {
 
   render() {
     return (
-      <div ref={this.slotRef} class="quark-button">
+      <div ref={this.slotRef} class="quark-button" part="root">
         {this.renderIcon()}
         <slot></slot>
       </div>
diff --git a/packages/quarkd/src/calendar/index.tsx b/packages/quarkd/src/calendar/index.tsx
index 3878fdfd..7889264e 100644
--- a/packages/quarkd/src/calendar/index.tsx
+++ b/packages/quarkd/src/calendar/index.tsx
@@ -646,7 +646,7 @@ class QuarkCalendar extends QuarkElement {
   };
 
   renderCalendar = () => (
-    <div class="quark-calendar">
+    <div class="quark-calendar" part="calendar">
       {this.renderHeader()}
       <div
         ref={this.bodyRef}
@@ -676,6 +676,7 @@ class QuarkCalendar extends QuarkElement {
           forbidmaskclick={this.forbidmaskclick}
           open={this.open}
           onClose={this.closePop}
+          part="root"
         >
           {this.renderCalendar()}
         </quark-popup>
diff --git a/packages/quarkd/src/cascadepicker/index.tsx b/packages/quarkd/src/cascadepicker/index.tsx
index 350413a2..40aa1864 100644
--- a/packages/quarkd/src/cascadepicker/index.tsx
+++ b/packages/quarkd/src/cascadepicker/index.tsx
@@ -235,6 +235,7 @@ class QuarkCascadePicker extends QuarkElement {
         round
         forbidmaskclick={this.forbidmaskclick}
         onclose={this.popupClose}
+        part="root"
       >
         <div class="quark-cascade-picker" part="picker">
           <div class="quark-cascade-picker-header" part="picker-header">
diff --git a/packages/quarkd/src/cell/index.tsx b/packages/quarkd/src/cell/index.tsx
index 47d82a40..8916f204 100644
--- a/packages/quarkd/src/cell/index.tsx
+++ b/packages/quarkd/src/cell/index.tsx
@@ -53,7 +53,7 @@ class QuarkCell extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-cell" onClick={this.handleNavigation}>
+      <div class="quark-cell" onClick={this.handleNavigation} part="root">
         <slot name="icon">{this.renderIcon()}</slot>
         <div class="quark-cell-title" part="title" id="title">
           <slot name="title">{this.title}</slot>
diff --git a/packages/quarkd/src/checkbox/index.tsx b/packages/quarkd/src/checkbox/index.tsx
index c72f0a87..b32d14d1 100644
--- a/packages/quarkd/src/checkbox/index.tsx
+++ b/packages/quarkd/src/checkbox/index.tsx
@@ -163,7 +163,7 @@ class QuarkCheckboxGroup extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-checkbox-group-wrapper">
+      <div class="quark-checkbox-group-wrapper" part="root">
         <slot onslotchange={this.handleSlotChange} ref={this.slotRef}></slot>
       </div>
     );
diff --git a/packages/quarkd/src/circle/index.tsx b/packages/quarkd/src/circle/index.tsx
index 4aa79a9c..365aba00 100644
--- a/packages/quarkd/src/circle/index.tsx
+++ b/packages/quarkd/src/circle/index.tsx
@@ -162,7 +162,7 @@ class QuarkCircle extends QuarkElement {
       transform: `rotate(${ROTATE_ANGLE_MAP[this.startposition]}deg)`,
     };
     return (
-      <div class="circle-wrapper" style={getSizeStyle}>
+      <div class="circle-wrapper" style={getSizeStyle} part="root">
         <svg style={svgStyle} part="svg">
           {this.renderGradient()}
           {this.renderLayer()}
diff --git a/packages/quarkd/src/collapse/index.tsx b/packages/quarkd/src/collapse/index.tsx
index ce86684f..b42b995d 100644
--- a/packages/quarkd/src/collapse/index.tsx
+++ b/packages/quarkd/src/collapse/index.tsx
@@ -45,7 +45,7 @@ class Collapse extends QuarkElement {
 
   render() {
     return (
-      <details ref={this.detailsEl}>
+      <details ref={this.detailsEl} part="root">
         <summary part="summary">
           <slot name="title">{this.title}</slot>
           <slot name="icon">
diff --git a/packages/quarkd/src/datetimepicker/TimePicker.tsx b/packages/quarkd/src/datetimepicker/TimePicker.tsx
index 5309b2e0..d81ceeb6 100644
--- a/packages/quarkd/src/datetimepicker/TimePicker.tsx
+++ b/packages/quarkd/src/datetimepicker/TimePicker.tsx
@@ -176,6 +176,7 @@ class QuarkTimePicker extends QuarkElement {
         onclose={this.onClose}
         onchange={this.onChange}
         onconfirm={this.confirm}
+        part="root"
       >
         {this.showtoolbar && (
           <div slot="header" class="quark-date-picker-header" part="header">
diff --git a/packages/quarkd/src/datetimepicker/index.tsx b/packages/quarkd/src/datetimepicker/index.tsx
index 462d4d10..7d710281 100644
--- a/packages/quarkd/src/datetimepicker/index.tsx
+++ b/packages/quarkd/src/datetimepicker/index.tsx
@@ -151,6 +151,7 @@ class QuarkDatetimePicker extends QuarkElement {
         onclose={this.onClose}
         onchange={this.onChange}
         onconfirm={this.onConfirm}
+        part="root"
       >
         <slot></slot>
       </quark-time-picker>
@@ -170,6 +171,7 @@ class QuarkDatetimePicker extends QuarkElement {
         onclose={this.onClose}
         onchange={this.onChange}
         onconfirm={this.onConfirm}
+        part="root"
       >
         <slot></slot>
       </quark-date-picker>
diff --git a/packages/quarkd/src/dropdownitem/index.tsx b/packages/quarkd/src/dropdownitem/index.tsx
index 814f99d4..6a493716 100644
--- a/packages/quarkd/src/dropdownitem/index.tsx
+++ b/packages/quarkd/src/dropdownitem/index.tsx
@@ -294,7 +294,7 @@ class QuarkDropdownItem extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-dropdown-item" ref={this.root}>
+      <div class="quark-dropdown-item" ref={this.root} part="root">
         <div
           ref={this.titleRef}
           class={this.titleCSS().class}
diff --git a/packages/quarkd/src/dropdownmenu/index.tsx b/packages/quarkd/src/dropdownmenu/index.tsx
index 02f8cbb4..40a138de 100644
--- a/packages/quarkd/src/dropdownmenu/index.tsx
+++ b/packages/quarkd/src/dropdownmenu/index.tsx
@@ -57,7 +57,7 @@ class QuarkDropdownMenu extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-dropdown-menu">
+      <div class="quark-dropdown-menu" part="root">
         <div class="quark-dropdown-menu__bar" part="menu-bar">
           <div class="quark-dropdown-menu__bar-inner" part="menu-inner">
             <div
diff --git a/packages/quarkd/src/empty/index.tsx b/packages/quarkd/src/empty/index.tsx
index 34d26f51..c86ea270 100644
--- a/packages/quarkd/src/empty/index.tsx
+++ b/packages/quarkd/src/empty/index.tsx
@@ -35,7 +35,7 @@ class QuarkEmpty extends QuarkElement {
   render() {
     return (
       <Fragment>
-        <div class="quark-empty" part="empty">
+        <div class="quark-empty" part="root">
           <img
             part="image"
             style={{
diff --git a/packages/quarkd/src/form/index.tsx b/packages/quarkd/src/form/index.tsx
index 42e18c7d..638f1e88 100644
--- a/packages/quarkd/src/form/index.tsx
+++ b/packages/quarkd/src/form/index.tsx
@@ -183,7 +183,7 @@ class QuarkForm extends QuarkElement {
 
   render() {
     return (
-      <form class="quark-form" ref={this.formRef}>
+      <form class="quark-form" ref={this.formRef} part="root">
         <slot ref={this.slotRef} onslotchange={this.onSlotChange}></slot>
       </form>
     );
diff --git a/packages/quarkd/src/grid/index.tsx b/packages/quarkd/src/grid/index.tsx
index 32eb585c..d4a27e04 100644
--- a/packages/quarkd/src/grid/index.tsx
+++ b/packages/quarkd/src/grid/index.tsx
@@ -146,7 +146,7 @@ class QuarkGrid extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-grid">
+      <div class="quark-grid" part="root">
         <slot onslotchange={this.handleSlotChange} ref={this.slotRef}></slot>
       </div>
     );
diff --git a/packages/quarkd/src/icon/index.tsx b/packages/quarkd/src/icon/index.tsx
index ca635d76..fdb57ef9 100644
--- a/packages/quarkd/src/icon/index.tsx
+++ b/packages/quarkd/src/icon/index.tsx
@@ -12,6 +12,7 @@ class QuarkIcon extends QuarkElement {
         class="quark-icon-svg"
         aria-hidden="true"
         viewBox="0 0 1024 1024"
+        part="root"
       ></svg>
     );
   }
diff --git a/packages/quarkd/src/image/index.tsx b/packages/quarkd/src/image/index.tsx
index cf57f1df..692bedce 100644
--- a/packages/quarkd/src/image/index.tsx
+++ b/packages/quarkd/src/image/index.tsx
@@ -108,7 +108,7 @@ class QuarkImage extends QuarkElement {
     };
 
     return (
-      <div class="quark-image">
+      <div class="quark-image" part="root">
         {this.status === "error" && (
           <div class="quark-image-loading" part="loading">
             <slot name="error">{Locale.current.image.loadError}</slot>
diff --git a/packages/quarkd/src/list/index.tsx b/packages/quarkd/src/list/index.tsx
index e99e2977..50287ff9 100644
--- a/packages/quarkd/src/list/index.tsx
+++ b/packages/quarkd/src/list/index.tsx
@@ -164,7 +164,7 @@ class QuarkList extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-list">
+      <div class="quark-list" part="root">
         <slot name="content"></slot>
         {this.loading && !this.finished && this.renderLoading()}
         {this.finished && this.renderFinishedText()}
diff --git a/packages/quarkd/src/loading/index.tsx b/packages/quarkd/src/loading/index.tsx
index 9cd4245f..bf6a0491 100644
--- a/packages/quarkd/src/loading/index.tsx
+++ b/packages/quarkd/src/loading/index.tsx
@@ -56,7 +56,7 @@ class QuarkLoading extends QuarkElement {
         <svg
           style={{ fontSize, transform }}
           class="quark-loading-spinner"
-          part="loading-spinner"
+          part="svg"
           t="1680062076772"
           viewBox="0 0 1024 1024"
           version="1.1"
diff --git a/packages/quarkd/src/marketdialog/index.tsx b/packages/quarkd/src/marketdialog/index.tsx
index 4c1c3276..6eb5c038 100644
--- a/packages/quarkd/src/marketdialog/index.tsx
+++ b/packages/quarkd/src/marketdialog/index.tsx
@@ -47,7 +47,7 @@ class QuarkMarketDialog extends QuarkElement {
 
   render() {
     return (
-      <quark-overlay open={this.open} part="overlay">
+      <quark-overlay open={this.open} part="root">
         <div class="quark-market-container" part="container">
           <slot name="market" part="market">
             {this.url && <img alt="error" src={this.url} />}
diff --git a/packages/quarkd/src/marquee/index.tsx b/packages/quarkd/src/marquee/index.tsx
index 25c9a334..6dca6d78 100644
--- a/packages/quarkd/src/marquee/index.tsx
+++ b/packages/quarkd/src/marquee/index.tsx
@@ -82,7 +82,7 @@ class QuarkMarquee extends QuarkElement {
           class={`quark-marquee-title ${
             this.paused ? "quark-marquee-paused" : ""
           }`}
-          part="title"
+          part="root"
           ref={this.titleRef}
           onTransitionend={this.transitionEnd}
         >
diff --git a/packages/quarkd/src/navbar/index.tsx b/packages/quarkd/src/navbar/index.tsx
index a3a6f4b9..3b550249 100644
--- a/packages/quarkd/src/navbar/index.tsx
+++ b/packages/quarkd/src/navbar/index.tsx
@@ -58,7 +58,7 @@ class QuarkNavbar extends QuarkElement {
               size={this.iconsize}
               onClick={this.leftClick}
               class="back"
-              part="back"
+              part="back-icon"
             />
             {!this.closehide && (
               <quark-icon-close
@@ -66,7 +66,7 @@ class QuarkNavbar extends QuarkElement {
                 size={this.iconsize}
                 onClick={this.closeClick}
                 class="close"
-                part="close"
+                part="close-icon"
               />
             )}
           </slot>
diff --git a/packages/quarkd/src/noticebar/index.tsx b/packages/quarkd/src/noticebar/index.tsx
index 21b12eb5..c88aeafe 100644
--- a/packages/quarkd/src/noticebar/index.tsx
+++ b/packages/quarkd/src/noticebar/index.tsx
@@ -53,7 +53,10 @@ class QuarkNoticebar extends QuarkElement {
 
   render() {
     return (
-      <div style={{ backgroundColor: this.bgcolor, color: this.color }}>
+      <div
+        style={{ backgroundColor: this.bgcolor, color: this.color }}
+        part="root"
+      >
         <slot name="left" class="quark-noticebar-left">
           {!this.lefthide && <quark-icon-notify part="notify-icon" size="15" />}
         </slot>
diff --git a/packages/quarkd/src/picker/index.tsx b/packages/quarkd/src/picker/index.tsx
index d59a7d4a..1f1e1867 100644
--- a/packages/quarkd/src/picker/index.tsx
+++ b/packages/quarkd/src/picker/index.tsx
@@ -182,6 +182,7 @@ class QuarkPicker extends QuarkElement {
         round
         forbidmaskclick={this.forbidmaskclick}
         onclose={this.popupClose}
+        part="root"
       >
         <div class="quark-picker-container" part="container">
           <div class="quark-picker-header" part="header">
diff --git a/packages/quarkd/src/pickerview/index.tsx b/packages/quarkd/src/pickerview/index.tsx
index 05982fc1..1756569a 100644
--- a/packages/quarkd/src/pickerview/index.tsx
+++ b/packages/quarkd/src/pickerview/index.tsx
@@ -157,7 +157,7 @@ class QuarkPickerView extends QuarkElement {
 
   render() {
     return (
-      <div part="container" class="quark-picker-container">
+      <div part="root" class="quark-picker-container">
         <div part="content" class="quark-picker-content">
           <div part="mask-top" class="quark-picker-mask-top"></div>
           <div part="mask-bottom" class="quark-picker-mask-bottom"></div>
diff --git a/packages/quarkd/src/popover/index.tsx b/packages/quarkd/src/popover/index.tsx
index 7c6f26d3..a23fd81a 100644
--- a/packages/quarkd/src/popover/index.tsx
+++ b/packages/quarkd/src/popover/index.tsx
@@ -196,7 +196,7 @@ class QuarkPopover extends QuarkElement {
     }
 
     return (
-      <div class="quark-popover-tips" ref={this.tipsRef}>
+      <div class="quark-popover-tips" ref={this.tipsRef} part="actions">
         <div class="quark-popover-triangle" part="triangle" />
         <div class="quark-popover-content" part="content">
           <slot name="content">
@@ -227,7 +227,7 @@ class QuarkPopover extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-popover">
+      <div class="quark-popover" part="root">
         <slot></slot>
         {this.renderActions()}
       </div>
diff --git a/packages/quarkd/src/popup/index.tsx b/packages/quarkd/src/popup/index.tsx
index e031f08a..bc178000 100644
--- a/packages/quarkd/src/popup/index.tsx
+++ b/packages/quarkd/src/popup/index.tsx
@@ -128,7 +128,7 @@ class QuarkPopup extends QuarkElement {
   render() {
     return (
       <Fragment>
-        <div class="quark-popup" ref={this.wrap}>
+        <div class="quark-popup" ref={this.wrap} part="root">
           {this.closeable && (
             <div
               class="quark-popup-close-btn"
diff --git a/packages/quarkd/src/popupextra/index.tsx b/packages/quarkd/src/popupextra/index.tsx
index 998ebbbf..5eb73d7b 100644
--- a/packages/quarkd/src/popupextra/index.tsx
+++ b/packages/quarkd/src/popupextra/index.tsx
@@ -134,7 +134,7 @@ class QuarkPopupExtra extends QuarkElement {
   render() {
     return (
       <Fragment>
-        <div class="quark-popup-extra">
+        <div class="quark-popup-extra" part="popup-extra">
           <button
             class="quark-popup-extra-close-btn"
             onClick={this.handleCloseBtnClick}
@@ -166,7 +166,11 @@ class QuarkPopupExtra extends QuarkElement {
           </div>
           <slot name="footer"></slot>
         </div>
-        <div class="quark-popup-extra-mask" onClick={this.handleClick} />
+        <div
+          class="quark-popup-extra-mask"
+          onClick={this.handleClick}
+          part="mask"
+        />
       </Fragment>
     );
   }
diff --git a/packages/quarkd/src/progress/index.tsx b/packages/quarkd/src/progress/index.tsx
index 8971dac3..e839cd7e 100644
--- a/packages/quarkd/src/progress/index.tsx
+++ b/packages/quarkd/src/progress/index.tsx
@@ -23,7 +23,7 @@ class QuarkProgress extends QuarkElement {
   render() {
     return (
       <Fragment>
-        <div class="wrap">
+        <div class="wrap" part="root">
           <div
             class="progress active"
             part="progress"
diff --git a/packages/quarkd/src/pullrefresh/index.tsx b/packages/quarkd/src/pullrefresh/index.tsx
index 9e50a531..001af34b 100644
--- a/packages/quarkd/src/pullrefresh/index.tsx
+++ b/packages/quarkd/src/pullrefresh/index.tsx
@@ -260,7 +260,7 @@ class QuarkPullRefresh extends QuarkElement {
     };
 
     return (
-      <div class="quark-pull-refresh">
+      <div class="quark-pull-refresh" part="root">
         <div
           class="quark-pull-refresh-container"
           part="container"
diff --git a/packages/quarkd/src/radio/index.tsx b/packages/quarkd/src/radio/index.tsx
index 1e08ba3b..7e1b08db 100644
--- a/packages/quarkd/src/radio/index.tsx
+++ b/packages/quarkd/src/radio/index.tsx
@@ -163,7 +163,7 @@ class QuarkRadioGroup extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-radio-group-wrapper" part="wrapper">
+      <div class="quark-radio-group-wrapper" part="root">
         <slot onslotchange={this.handleSlotChange} ref={this.slotRef}></slot>
       </div>
     );
diff --git a/packages/quarkd/src/search/index.tsx b/packages/quarkd/src/search/index.tsx
index b8850217..e8f9c6d3 100644
--- a/packages/quarkd/src/search/index.tsx
+++ b/packages/quarkd/src/search/index.tsx
@@ -171,7 +171,7 @@ class QuarkSearch extends QuarkElement {
       this.value && this.clearable && !this.disabled && !this.readonly;
 
     return (
-      <div class={searchClass}>
+      <div class={searchClass} part="root">
         {this.showback && (
           <div class="quark-search-back" part="back" onClick={this.backEvent}>
             <quark-icon-arrow-left
diff --git a/packages/quarkd/src/sharesheet/index.tsx b/packages/quarkd/src/sharesheet/index.tsx
index 809afbeb..d2986f04 100644
--- a/packages/quarkd/src/sharesheet/index.tsx
+++ b/packages/quarkd/src/sharesheet/index.tsx
@@ -186,6 +186,7 @@ class QuarkShareSheet extends QuarkElement {
         class="quark-sharesheet"
         ref={this.wrap}
         onClick={this.handleContainerClick}
+        part="root"
       >
         <div
           class="quark-sharesheet-title"
diff --git a/packages/quarkd/src/skeleton/index.tsx b/packages/quarkd/src/skeleton/index.tsx
index 73acd967..974c45c6 100644
--- a/packages/quarkd/src/skeleton/index.tsx
+++ b/packages/quarkd/src/skeleton/index.tsx
@@ -54,7 +54,7 @@ class Skeleton extends QuarkElement {
     return (
       <Fragment>
         {!this.hide ? (
-          <div class="skeleton-container">
+          <div class="skeleton-container" part="root">
             {this.avatar && <div class="skeleton-avatar" part="avatar"></div>}
             <div class="skeleton-content" part="content">
               {this.title && <h3 class="skeleton-title" part="title"></h3>}
diff --git a/packages/quarkd/src/stepper/index.tsx b/packages/quarkd/src/stepper/index.tsx
index 194f9fb6..92cab1e1 100644
--- a/packages/quarkd/src/stepper/index.tsx
+++ b/packages/quarkd/src/stepper/index.tsx
@@ -190,8 +190,9 @@ class QuarkStepper extends QuarkElement {
     const inputClassName = classNames("quark-stepper-input", {
       "quark-stepper-disabled": this.disabled,
     });
+
     return (
-      <div class="quark-stepper-container" id="stepper">
+      <div class="quark-stepper-container" id="stepper" part="root">
         <button
           type="button"
           part="mini"
diff --git a/packages/quarkd/src/steps/index.tsx b/packages/quarkd/src/steps/index.tsx
index dedd51a5..56b9767d 100644
--- a/packages/quarkd/src/steps/index.tsx
+++ b/packages/quarkd/src/steps/index.tsx
@@ -40,7 +40,11 @@ class QuarkStep extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-step quark-step-horizontal" ref={this.containerRef}>
+      <div
+        class="quark-step quark-step-horizontal"
+        ref={this.containerRef}
+        part="root"
+      >
         <div class="quark-step" part="step">
           <div class="quark-step-head" part="head">
             <div class="quark-step-icon is-text" part="icon">
diff --git a/packages/quarkd/src/sticky/index.tsx b/packages/quarkd/src/sticky/index.tsx
index 2192df97..fd9a4c40 100644
--- a/packages/quarkd/src/sticky/index.tsx
+++ b/packages/quarkd/src/sticky/index.tsx
@@ -70,7 +70,7 @@ class QuarkSticky extends QuarkElement {
 
   render() {
     return (
-      <div id="container" ref={this.containerRef}>
+      <div id="container" ref={this.containerRef} part="root">
         <div ref={this.stickyRef} part="sticky-ref">
           <slot></slot>
         </div>
diff --git a/packages/quarkd/src/swipe/index.tsx b/packages/quarkd/src/swipe/index.tsx
index 0e54a978..932971cb 100644
--- a/packages/quarkd/src/swipe/index.tsx
+++ b/packages/quarkd/src/swipe/index.tsx
@@ -387,7 +387,7 @@ class QuarkSwipe extends QuarkElement {
   render() {
     return (
       <Fragment>
-        <div class="container" ref={this.containerRef} part="container">
+        <div class="container" ref={this.containerRef} part="root">
           <slot
             onslotchange={this.handleRightSlotChange}
             ref={this.slotWrapRef}
diff --git a/packages/quarkd/src/swipecell/index.tsx b/packages/quarkd/src/swipecell/index.tsx
index 4dfb060e..d6ca20f7 100644
--- a/packages/quarkd/src/swipecell/index.tsx
+++ b/packages/quarkd/src/swipecell/index.tsx
@@ -245,8 +245,8 @@ class QuarkSwipeCell extends QuarkElement {
       <div
         ref={this.root}
         class="quark-swipe-cell"
-        part="cell"
         onClick={this.getClickHandler("cell", this.lockClick)}
+        part="root"
       >
         <div
           class="quark-swipe-cell__wrapper"
diff --git a/packages/quarkd/src/switch/index.tsx b/packages/quarkd/src/switch/index.tsx
index 441cd636..007d811d 100644
--- a/packages/quarkd/src/switch/index.tsx
+++ b/packages/quarkd/src/switch/index.tsx
@@ -63,7 +63,11 @@ class QuarkSwitch extends QuarkElement {
     };
 
     return (
-      <div style={inlineStyle} class={this.loading && "quark-switch-loading"}>
+      <div
+        style={inlineStyle}
+        class={this.loading && "quark-switch-loading"}
+        part="root"
+      >
         <input
           type="checkbox"
           id="quark-switch"
diff --git a/packages/quarkd/src/tab/index.tsx b/packages/quarkd/src/tab/index.tsx
index 964116f0..041f3548 100644
--- a/packages/quarkd/src/tab/index.tsx
+++ b/packages/quarkd/src/tab/index.tsx
@@ -439,7 +439,7 @@ class QuarkTabNav extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-tab-nav" onClick={this.handleClick}>
+      <div class="quark-tab-nav" onClick={this.handleClick} part="root">
         <slot></slot>
       </div>
     );
diff --git a/packages/quarkd/src/tabbar/index.tsx b/packages/quarkd/src/tabbar/index.tsx
index ca8b7f8f..b5b1b4a2 100644
--- a/packages/quarkd/src/tabbar/index.tsx
+++ b/packages/quarkd/src/tabbar/index.tsx
@@ -67,7 +67,7 @@ class QuarkTabbar extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-tabbar">
+      <div class="quark-tabbar" part="root">
         <slot ref={this.slotRef} onslotchange={this.slotchange}></slot>
       </div>
     );
diff --git a/packages/quarkd/src/tag/index.tsx b/packages/quarkd/src/tag/index.tsx
index 6798a700..de5cfe5f 100644
--- a/packages/quarkd/src/tag/index.tsx
+++ b/packages/quarkd/src/tag/index.tsx
@@ -46,6 +46,7 @@ class QuarkTag extends QuarkElement {
       <span
         class="quark-tag"
         style={{ background: this.color, color: this.textcolor }}
+        part="root"
       >
         <slot></slot>
       </span>
diff --git a/packages/quarkd/src/textarea/index.tsx b/packages/quarkd/src/textarea/index.tsx
index ea94fa1d..c221e200 100644
--- a/packages/quarkd/src/textarea/index.tsx
+++ b/packages/quarkd/src/textarea/index.tsx
@@ -92,7 +92,7 @@ class TextArea extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-textarea">
+      <div class="quark-textarea" part="root">
         <textarea
           class="quark-text-area"
           part="textarea"
diff --git a/packages/quarkd/src/toast/index.tsx b/packages/quarkd/src/toast/index.tsx
index dcc33f9e..a678ac8d 100644
--- a/packages/quarkd/src/toast/index.tsx
+++ b/packages/quarkd/src/toast/index.tsx
@@ -139,7 +139,7 @@ class QuarkToast extends QuarkElement {
 
   renderLoading = () => {
     return (
-      <quark-overlay open={this.show} zIndex={this.zIndex}>
+      <quark-overlay open={this.show} zIndex={this.zIndex} part="overlay">
         <div
           class={`quark-toast quark-toast--${this.loadingIconDirection}`}
           part="loading"
@@ -170,7 +170,7 @@ class QuarkToast extends QuarkElement {
     return (
       <div
         class="quark-toast"
-        part="toast"
+        part="root"
         ref={this.toastRef}
         style={{
           minWidth: `var(--toast-min-width, 120px)`,
diff --git a/packages/quarkd/src/tooltip/index.tsx b/packages/quarkd/src/tooltip/index.tsx
index 6955cad7..0998bb3a 100644
--- a/packages/quarkd/src/tooltip/index.tsx
+++ b/packages/quarkd/src/tooltip/index.tsx
@@ -199,9 +199,9 @@ class QuarkTooltip extends QuarkElement {
     return (
       <div
         class="quark-tooltip-tips"
-        part="tips"
         ref={this.tipsRef}
         onClick={this.handleTipsClick}
+        part="root"
       >
         <div class="quark-tooltip-triangle" part="triangle" />
         <div class="quark-tooltip-content" part="content">
diff --git a/packages/quarkd/src/virtuallist/index.tsx b/packages/quarkd/src/virtuallist/index.tsx
index 04dfbfe0..6e674be9 100644
--- a/packages/quarkd/src/virtuallist/index.tsx
+++ b/packages/quarkd/src/virtuallist/index.tsx
@@ -99,6 +99,7 @@ class QuarkVirtualList extends QuarkElement {
         class="quark-virtual-list"
         style={{ height: this.containerheight }}
         onScroll={this.handleListScroll}
+        part="root"
       >
         <div
           class="quark-virtual-list-phantom"
diff --git a/packages/quarkd/src/watermark/index.tsx b/packages/quarkd/src/watermark/index.tsx
index 085f06b2..b339f1e7 100644
--- a/packages/quarkd/src/watermark/index.tsx
+++ b/packages/quarkd/src/watermark/index.tsx
@@ -155,7 +155,9 @@ class QuarkWaterMark extends QuarkElement {
   }
 
   render() {
-    return <div ref={this.waterMarkRef} class="quark-watermark"></div>;
+    return (
+      <div ref={this.waterMarkRef} class="quark-watermark" part="root"></div>
+    );
   }
 }