From 4d9351c0f4a1c3238a044e5d12ee9ddf1be02e7e Mon Sep 17 00:00:00 2001
From: mantou132 <709922234@qq.com>
Date: Mon, 8 Jul 2024 02:35:19 +0800
Subject: [PATCH] [gem] Use decorator metadata

Closed #156
---
 package.json                                  |   4 +-
 packages/duoyun-ui/package.json               |   2 +-
 .../duoyun-ui/src/elements/action-text.ts     |   7 +-
 packages/duoyun-ui/src/elements/alert.ts      |   8 +-
 packages/duoyun-ui/src/elements/area-chart.ts |   2 +-
 packages/duoyun-ui/src/elements/avatar.ts     |   7 +-
 packages/duoyun-ui/src/elements/banner.ts     |   9 +-
 packages/duoyun-ui/src/elements/base/chart.ts |  10 +-
 .../duoyun-ui/src/elements/base/loadable.ts   |   6 +-
 .../duoyun-ui/src/elements/base/resize.ts     |   9 +-
 .../duoyun-ui/src/elements/base/visible.ts    |   6 +-
 .../duoyun-ui/src/elements/base/wake-lock.ts  |   5 +-
 .../duoyun-ui/src/elements/breadcrumbs.ts     |   8 +-
 packages/duoyun-ui/src/elements/button.ts     |   4 +-
 packages/duoyun-ui/src/elements/calendar.ts   |   4 +-
 packages/duoyun-ui/src/elements/card.ts       |   9 +-
 packages/duoyun-ui/src/elements/carousel.ts   |   6 +-
 .../duoyun-ui/src/elements/cascader-picker.ts |   9 +-
 packages/duoyun-ui/src/elements/chart-zoom.ts |   1 +
 packages/duoyun-ui/src/elements/checkbox.ts   |  12 +-
 packages/duoyun-ui/src/elements/collapse.ts   |  15 +-
 .../duoyun-ui/src/elements/color-panel.ts     |   7 +-
 .../duoyun-ui/src/elements/color-picker.ts    |   6 +-
 .../duoyun-ui/src/elements/contextmenu.ts     |   7 +-
 packages/duoyun-ui/src/elements/copy.ts       |   6 +-
 packages/duoyun-ui/src/elements/date-panel.ts |   9 +-
 .../duoyun-ui/src/elements/date-picker.ts     |   7 +-
 .../src/elements/date-range-panel.ts          |   8 +-
 .../src/elements/date-range-picker.ts         |   7 +-
 packages/duoyun-ui/src/elements/divider.ts    |   4 +-
 packages/duoyun-ui/src/elements/drop-area.ts  |   3 +-
 .../duoyun-ui/src/elements/file-picker.ts     |   6 +-
 packages/duoyun-ui/src/elements/form.ts       |  14 +-
 .../duoyun-ui/src/elements/image-preview.ts   |   7 +-
 packages/duoyun-ui/src/elements/input.ts      |  16 +-
 packages/duoyun-ui/src/elements/legend.ts     |   4 +-
 packages/duoyun-ui/src/elements/list.ts       |  14 +-
 packages/duoyun-ui/src/elements/map.ts        |   8 +-
 packages/duoyun-ui/src/elements/meter.ts      |   4 +-
 packages/duoyun-ui/src/elements/modal.ts      |   4 +-
 packages/duoyun-ui/src/elements/more.ts       |   9 +-
 packages/duoyun-ui/src/elements/options.ts    |  17 +-
 .../duoyun-ui/src/elements/page-loadbar.ts    |   8 +-
 packages/duoyun-ui/src/elements/pagination.ts |  10 +-
 packages/duoyun-ui/src/elements/paragraph.ts  |   9 +-
 packages/duoyun-ui/src/elements/picker.ts     |   7 +-
 .../duoyun-ui/src/elements/placeholder.ts     |  17 +-
 packages/duoyun-ui/src/elements/popover.ts    |   4 +-
 packages/duoyun-ui/src/elements/progress.ts   |   4 +-
 packages/duoyun-ui/src/elements/radio.ts      |  12 +-
 packages/duoyun-ui/src/elements/rate.ts       |   7 +-
 packages/duoyun-ui/src/elements/segmented.ts  |   9 +-
 packages/duoyun-ui/src/elements/select.ts     |   4 +-
 .../duoyun-ui/src/elements/shortcut-record.ts |   7 +-
 .../duoyun-ui/src/elements/side-navigation.ts |  19 +-
 packages/duoyun-ui/src/elements/slider.ts     |   7 +-
 packages/duoyun-ui/src/elements/space.ts      |   7 +-
 packages/duoyun-ui/src/elements/statistic.ts  |   7 +-
 .../duoyun-ui/src/elements/status-light.ts    |   8 +-
 packages/duoyun-ui/src/elements/switch.ts     |   4 +-
 packages/duoyun-ui/src/elements/table.ts      |   6 +-
 packages/duoyun-ui/src/elements/tabs.ts       |  11 +-
 packages/duoyun-ui/src/elements/tag.ts        |   9 +-
 packages/duoyun-ui/src/elements/time-panel.ts |   6 +-
 .../duoyun-ui/src/elements/time-picker.ts     |   7 +-
 packages/duoyun-ui/src/elements/timeline.ts   |   8 +-
 packages/duoyun-ui/src/elements/toast.ts      |   5 +-
 packages/duoyun-ui/src/elements/tree.ts       |  17 +-
 packages/duoyun-ui/src/elements/wait.ts       |   5 +-
 packages/duoyun-ui/src/lib/element.ts         |   4 +-
 packages/duoyun-ui/src/patterns/console.ts    |   7 +-
 packages/duoyun-ui/src/patterns/footer.ts     |   7 +-
 packages/duoyun-ui/src/patterns/nav.ts        |  13 +-
 packages/gem-analyzer/package.json            |   2 +-
 packages/gem-book/package.json                |   2 +-
 .../gem-book/src/element/elements/loadbar.ts  |  10 +-
 packages/gem-book/src/plugins/api.ts          |   5 +-
 packages/gem-book/src/plugins/include.ts      |   5 +-
 packages/gem-book/src/plugins/trans-status.ts |   7 +-
 packages/gem-devtools/src/scripts/get-gem.ts  |  37 +--
 packages/gem-devtools/src/scripts/preload.ts  |   2 +-
 packages/gem-examples/src/async/index.ts      |  16 +-
 packages/gem-examples/src/homepage/index.ts   |   7 +-
 packages/gem-examples/src/light-dom/index.ts  |   5 +-
 packages/gem-examples/src/perf-demo/index.ts  |   5 +-
 packages/gem-examples/src/scope/index.ts      |   6 +-
 packages/gem-port/package.json                |   2 +-
 .../gem/docs/en/003-api/001-gem-element.md    |  12 +-
 packages/gem/docs/en/003-api/007-decorator.md |   6 +
 .../004-blog/001-create-standard-element.md   |  20 +-
 .../gem/docs/zh/003-api/001-gem-element.md    |  12 +-
 packages/gem/docs/zh/003-api/007-decorator.md |   6 +
 .../004-blog/001-create-standard-element.md   |  20 +-
 packages/gem/package.json                     |   2 +-
 packages/gem/src/elements/base/dialog.ts      |  15 +-
 packages/gem/src/elements/base/link.ts        |   5 +-
 .../gem/src/elements/base/modal-factory.ts    |   9 +-
 packages/gem/src/elements/base/reflect.ts     |   5 +-
 packages/gem/src/elements/base/route.ts       |  14 +-
 packages/gem/src/helper/i18n.ts               |   4 +-
 packages/gem/src/lib/decorators.ts            | 148 +++++----
 packages/gem/src/lib/element.ts               | 122 ++++----
 packages/gem/src/lib/utils.ts                 |   1 -
 .../gem/src/test/gem-element/advance.test.ts  |  15 +-
 .../src/test/gem-element/decorators.test.ts   |  23 +-
 yarn.lock                                     | 296 +++++++++---------
 106 files changed, 701 insertions(+), 710 deletions(-)

diff --git a/package.json b/package.json
index 5fdce33d..06491751 100644
--- a/package.json
+++ b/package.json
@@ -26,10 +26,10 @@
     "lerna": "^8.0.0",
     "lint-staged": "^15.1.0",
     "prettier": "^3.1.0",
-    "typescript": "^5.4.3"
+    "typescript": "^5.5.3"
   },
   "resolutions": {
-    "**/esbuild": "^0.21.2"
+    "**/esbuild": "^0.23.0"
   },
   "lint-staged": {
     "*.ts": "eslint --fix"
diff --git a/packages/duoyun-ui/package.json b/packages/duoyun-ui/package.json
index fc4dd3ed..d7349ba2 100644
--- a/packages/duoyun-ui/package.json
+++ b/packages/duoyun-ui/package.json
@@ -62,7 +62,7 @@
     "@web/dev-server-esbuild": "^1.0.2",
     "@web/test-runner": "^0.18.1",
     "rimraf": "^3.0.2",
-    "typescript": "^5.4.3",
+    "typescript": "^5.5.3",
     "webpack-merge": "^5.7.3"
   },
   "author": "mantou132",
diff --git a/packages/duoyun-ui/src/elements/action-text.ts b/packages/duoyun-ui/src/elements/action-text.ts
index 473dbfc7..6d2813ef 100644
--- a/packages/duoyun-ui/src/elements/action-text.ts
+++ b/packages/duoyun-ui/src/elements/action-text.ts
@@ -1,5 +1,5 @@
 import { GemElement, html } from '@mantou/gem/lib/element';
-import { adoptedStyle, customElement, attribute, state, slot } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, state, slot, focusable, aria } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
 import { theme, getSemanticColor } from '../lib/theme';
@@ -34,6 +34,8 @@ const style = createCSSSheet(css`
 @customElement('dy-action-text')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@focusable()
+@aria({ role: 'button' })
 export class DuoyunActionTextElement extends GemElement {
   @slot static unnamed: string;
 
@@ -42,8 +44,7 @@ export class DuoyunActionTextElement extends GemElement {
   @state active: boolean;
 
   constructor() {
-    super({ focusable: true });
-    this.internals.role = 'button';
+    super();
     this.addEventListener('keydown', commonHandle);
   }
 
diff --git a/packages/duoyun-ui/src/elements/alert.ts b/packages/duoyun-ui/src/elements/alert.ts
index 2b953c99..5bb84298 100644
--- a/packages/duoyun-ui/src/elements/alert.ts
+++ b/packages/duoyun-ui/src/elements/alert.ts
@@ -1,5 +1,5 @@
 // https://spectrum.adobe.com/page/in-line-alert/
-import { adoptedStyle, customElement, attribute, property, slot } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, property, slot, aria } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -49,6 +49,7 @@ type Status = 'positive' | 'notice' | 'negative' | 'informative' | 'default';
  */
 @customElement('dy-alert')
 @adoptedStyle(style)
+@aria({ role: 'alert' })
 export class DuoyunAlertElement extends GemElement {
   @slot static unnamed: string;
 
@@ -74,11 +75,6 @@ export class DuoyunAlertElement extends GemElement {
     return getSemanticColor(this.status) || theme.neutralColor;
   }
 
-  constructor() {
-    super();
-    this.internals.role = 'alert';
-  }
-
   render = () => {
     const icon = this.#icon;
     return html`
diff --git a/packages/duoyun-ui/src/elements/area-chart.ts b/packages/duoyun-ui/src/elements/area-chart.ts
index 7feadf33..cc916dd4 100644
--- a/packages/duoyun-ui/src/elements/area-chart.ts
+++ b/packages/duoyun-ui/src/elements/area-chart.ts
@@ -80,7 +80,7 @@ export class DuoyunAreaChartElement extends DuoyunChartBaseElement {
   }
 
   constructor() {
-    super({ isLight: false });
+    super();
     this.addEventListener('pointermove', this.#onPointerMove);
     this.addEventListener('pointerout', this.#onPointerOut);
     this.addEventListener('pointercancel', this.#onPointerOut);
diff --git a/packages/duoyun-ui/src/elements/avatar.ts b/packages/duoyun-ui/src/elements/avatar.ts
index 0a14ca0c..00f1197d 100644
--- a/packages/duoyun-ui/src/elements/avatar.ts
+++ b/packages/duoyun-ui/src/elements/avatar.ts
@@ -6,6 +6,7 @@ import {
   boolattribute,
   numattribute,
   part,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, exportPartsMap } from '@mantou/gem/lib/utils';
@@ -161,6 +162,7 @@ export type AvatarItem = {
  */
 @customElement('dy-avatar-group')
 @adoptedStyle(groupStyle)
+@aria({ role: 'list' })
 export class DuoyunAvatarGroupElement extends GemElement {
   @part static avatar: string;
 
@@ -180,11 +182,6 @@ export class DuoyunAvatarGroupElement extends GemElement {
     return this.max || this.#items?.length || 0;
   }
 
-  constructor() {
-    super();
-    this.internals.role = 'list';
-  }
-
   #parts = exportPartsMap({ [DuoyunAvatarElement.avatar]: DuoyunAvatarGroupElement.avatar });
 
   #renderAvatar = ({ src = '', tooltip = '', alt = '', status, onClick }: AvatarItem) => {
diff --git a/packages/duoyun-ui/src/elements/banner.ts b/packages/duoyun-ui/src/elements/banner.ts
index 6420593f..a7bdb879 100644
--- a/packages/duoyun-ui/src/elements/banner.ts
+++ b/packages/duoyun-ui/src/elements/banner.ts
@@ -8,6 +8,8 @@ import {
   property,
   boolattribute,
   slot,
+  shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -82,6 +84,8 @@ type Status = 'positive' | 'notice' | 'negative' | 'default';
  */
 @customElement('dy-banner')
 @adoptedStyle(style)
+@shadow()
+@aria({ role: 'banner' })
 export class DuoyunBannerElement extends GemElement {
   @slot static unnamed: string;
 
@@ -103,11 +107,6 @@ export class DuoyunBannerElement extends GemElement {
     }
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'banner';
-  }
-
   render = () => {
     const icon = this.#icon;
     return html`
diff --git a/packages/duoyun-ui/src/elements/base/chart.ts b/packages/duoyun-ui/src/elements/base/chart.ts
index 84963aab..93b41940 100644
--- a/packages/duoyun-ui/src/elements/base/chart.ts
+++ b/packages/duoyun-ui/src/elements/base/chart.ts
@@ -1,5 +1,5 @@
-import { adoptedStyle, emitter, Emitter, property, state, part } from '@mantou/gem/lib/decorators';
-import { html, svg, TemplateResult, GemElementOptions } from '@mantou/gem/lib/element';
+import { adoptedStyle, emitter, Emitter, property, state, part, aria } from '@mantou/gem/lib/decorators';
+import { html, svg, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, randomStr } from '@mantou/gem/lib/utils';
 
 import { theme } from '../../lib/theme';
@@ -53,6 +53,7 @@ const style = createCSSSheet(css`
 `);
 
 @adoptedStyle(style)
+@aria({ role: 'img' })
 export class DuoyunChartBaseElement<_T = Record<string, unknown>> extends DuoyunResizeBaseElement {
   @part static chart: string;
 
@@ -79,9 +80,8 @@ export class DuoyunChartBaseElement<_T = Record<string, unknown>> extends Duoyun
     return this.aspectRatio || 2;
   }
 
-  constructor(options?: GemElementOptions) {
-    super(options);
-    this.internals.role = 'img';
+  constructor() {
+    super();
     this.memo(
       () => (this.filtersSet = new Set(this.filters)),
       () => [this.filters],
diff --git a/packages/duoyun-ui/src/elements/base/loadable.ts b/packages/duoyun-ui/src/elements/base/loadable.ts
index 63a9e2f9..233b0de7 100644
--- a/packages/duoyun-ui/src/elements/base/loadable.ts
+++ b/packages/duoyun-ui/src/elements/base/loadable.ts
@@ -1,5 +1,5 @@
 import { adoptedStyle, customElement, boolattribute } from '@mantou/gem/lib/decorators';
-import { GemElement, html, GemElementOptions } from '@mantou/gem/lib/element';
+import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
 import { theme } from '../../lib/theme';
@@ -53,8 +53,8 @@ const style = createCSSSheet(css`
 export class DuoyunLoadableBaseElement<T = Record<string, unknown>> extends GemElement<T> {
   @boolattribute loading: boolean;
 
-  constructor(options?: GemElementOptions) {
-    super(options);
+  constructor() {
+    super();
     const mask = new DuoyunLoadableMaskElement();
     this.effect(() => {
       this.internals.ariaBusy = String(this.loading);
diff --git a/packages/duoyun-ui/src/elements/base/resize.ts b/packages/duoyun-ui/src/elements/base/resize.ts
index 851ca880..d75a7fc0 100644
--- a/packages/duoyun-ui/src/elements/base/resize.ts
+++ b/packages/duoyun-ui/src/elements/base/resize.ts
@@ -1,5 +1,5 @@
 import { emitter, Emitter } from '@mantou/gem/lib/decorators';
-import { GemElement, GemElementOptions } from '@mantou/gem/lib/element';
+import { GemElement } from '@mantou/gem/lib/element';
 
 import { throttle } from '../../lib/timer';
 
@@ -8,7 +8,9 @@ export type ResizeDetail = {
   borderBoxSize: DuoyunResizeBaseElement['borderBoxSize'];
 };
 
-export function resizeObserver(ele: DuoyunResizeBaseElement, options: { throttle?: boolean } = {}) {
+export type DuoyunResizeBaseElementOptions = { throttle?: boolean };
+
+export function resizeObserver(ele: DuoyunResizeBaseElement, options: DuoyunResizeBaseElementOptions = {}) {
   const { throttle: needThrottle = true } = options;
   const callback = (entryList: ResizeObserverEntry[]) => {
     entryList.forEach((entry) => {
@@ -29,12 +31,11 @@ export function resizeObserver(ele: DuoyunResizeBaseElement, options: { throttle
   return () => ro.disconnect();
 }
 
-export type DuoyunResizeBaseElementOptions = GemElementOptions & { throttle?: boolean };
 export class DuoyunResizeBaseElement<_T = Record<string, unknown>> extends GemElement {
   @emitter resize: Emitter<ResizeDetail>;
 
   constructor(options: DuoyunResizeBaseElementOptions = {}) {
-    super(options);
+    super();
     this.effect(
       () => resizeObserver(this, options),
       () => [],
diff --git a/packages/duoyun-ui/src/elements/base/visible.ts b/packages/duoyun-ui/src/elements/base/visible.ts
index ad6c8b25..ebd068b0 100644
--- a/packages/duoyun-ui/src/elements/base/visible.ts
+++ b/packages/duoyun-ui/src/elements/base/visible.ts
@@ -1,5 +1,5 @@
 import { emitter, Emitter, property, state } from '@mantou/gem/lib/decorators';
-import { GemElement, GemElementOptions } from '@mantou/gem/lib/element';
+import { GemElement } from '@mantou/gem/lib/element';
 
 export function visibilityObserver(ele: DuoyunVisibleBaseElement) {
   const io = new IntersectionObserver(
@@ -36,8 +36,8 @@ export class DuoyunVisibleBaseElement<_T = Record<string, unknown>> extends GemE
   @property intersectionRoot?: Element | Document;
   @property intersectionRootMargin?: string;
 
-  constructor(options?: GemElementOptions) {
-    super(options);
+  constructor() {
+    super();
     this.effect(
       () => visibilityObserver(this),
       () => [this.intersectionRoot],
diff --git a/packages/duoyun-ui/src/elements/base/wake-lock.ts b/packages/duoyun-ui/src/elements/base/wake-lock.ts
index c48cb466..c9c55cec 100644
--- a/packages/duoyun-ui/src/elements/base/wake-lock.ts
+++ b/packages/duoyun-ui/src/elements/base/wake-lock.ts
@@ -1,6 +1,5 @@
 /**只要元素显示在屏幕内，屏幕就不会自动熄灭 */
 
-import { GemElementOptions } from '@mantou/gem/lib/element';
 import { logger } from '@mantou/gem/helper/logger';
 import { addListener } from '@mantou/gem/lib/utils';
 
@@ -39,8 +38,8 @@ export function wakeLock(ele: DuoyunWakeLockBaseElement) {
 }
 
 export class DuoyunWakeLockBaseElement<_T = Record<string, unknown>> extends DuoyunVisibleBaseElement {
-  constructor(options?: GemElementOptions) {
-    super(options);
+  constructor() {
+    super();
     this.effect(
       () => wakeLock(this),
       () => [],
diff --git a/packages/duoyun-ui/src/elements/breadcrumbs.ts b/packages/duoyun-ui/src/elements/breadcrumbs.ts
index 25cf1a61..dec8ee5a 100644
--- a/packages/duoyun-ui/src/elements/breadcrumbs.ts
+++ b/packages/duoyun-ui/src/elements/breadcrumbs.ts
@@ -1,5 +1,5 @@
 // https://spectrum.adobe.com/page/breadcrumbs/
-import { adoptedStyle, customElement, property, boolattribute, part } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, property, boolattribute, part, aria } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
 
@@ -55,6 +55,7 @@ export type BreadcrumbsItem = {
  */
 @customElement('dy-breadcrumbs')
 @adoptedStyle(style)
+@aria({ ariaLabel: 'breadcrumbs' })
 export class DuoyunBreadcrumbsElement extends GemElement {
   @part static item: string;
 
@@ -68,11 +69,6 @@ export class DuoyunBreadcrumbsElement extends GemElement {
     return this.items || this.list;
   }
 
-  constructor() {
-    super();
-    this.internals.ariaLabel = 'breadcrumbs';
-  }
-
   render = () => {
     return html`
       ${this.#items?.map(
diff --git a/packages/duoyun-ui/src/elements/button.ts b/packages/duoyun-ui/src/elements/button.ts
index 93e3bc5c..c4e70b5a 100644
--- a/packages/duoyun-ui/src/elements/button.ts
+++ b/packages/duoyun-ui/src/elements/button.ts
@@ -10,6 +10,7 @@ import {
   state,
   part,
   slot,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { history } from '@mantou/gem/lib/history';
@@ -139,6 +140,7 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
+@shadow()
 export class DuoyunButtonElement extends GemElement {
   @slot static unnamed: string;
 
@@ -167,7 +169,7 @@ export class DuoyunButtonElement extends GemElement {
   }
 
   constructor() {
-    super({ delegatesFocus: true });
+    super();
     this.addEventListener('click', () => {
       if (this.disabled) return;
       if (this.route) {
diff --git a/packages/duoyun-ui/src/elements/calendar.ts b/packages/duoyun-ui/src/elements/calendar.ts
index fa23cceb..ee782659 100644
--- a/packages/duoyun-ui/src/elements/calendar.ts
+++ b/packages/duoyun-ui/src/elements/calendar.ts
@@ -6,6 +6,7 @@ import {
   property,
   boolattribute,
   part,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap, partMap } from '@mantou/gem/lib/utils';
@@ -112,6 +113,7 @@ interface Day {
 @customElement('dy-calendar')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
 export class DuoyunCalendarElement extends GemElement {
   @part static headerRow: string;
   @part static headerLeftCell: string;
@@ -140,7 +142,7 @@ export class DuoyunCalendarElement extends GemElement {
   @property renderDate?: (date: Time) => TemplateResult;
 
   constructor() {
-    super({ delegatesFocus: true });
+    super();
   }
 
   #isHighlightRange = (date: Time) => {
diff --git a/packages/duoyun-ui/src/elements/card.ts b/packages/duoyun-ui/src/elements/card.ts
index 5c2a9ab3..743e0c69 100644
--- a/packages/duoyun-ui/src/elements/card.ts
+++ b/packages/duoyun-ui/src/elements/card.ts
@@ -1,5 +1,5 @@
 // https://spectrum.adobe.com/page/cards/
-import { adoptedStyle, customElement, attribute, property, part, slot } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, property, part, slot, shadow, aria } from '@mantou/gem/lib/decorators';
 import { html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -99,6 +99,8 @@ export type ActionItem = Omit<ContextMenuItem, 'handle'> & { handle: (rest: HTML
 @customElement('dy-card')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
+@aria({ role: 'group' })
 export class DuoyunCardElement extends DuoyunLoadableBaseElement {
   @part static preview: string;
   @part static avatar: string;
@@ -116,11 +118,6 @@ export class DuoyunCardElement extends DuoyunLoadableBaseElement {
   @property actions?: ActionItem[];
   @attribute crossorigin: 'anonymous' | 'use-credentials';
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'group';
-  }
-
   #onOpenMenu = (evt: MouseEvent) => {
     const target = evt.target as HTMLElement;
     ContextMenu.open(
diff --git a/packages/duoyun-ui/src/elements/carousel.ts b/packages/duoyun-ui/src/elements/carousel.ts
index 0abe8ff3..1b752151 100644
--- a/packages/duoyun-ui/src/elements/carousel.ts
+++ b/packages/duoyun-ui/src/elements/carousel.ts
@@ -8,6 +8,7 @@ import {
   part,
   emitter,
   Emitter,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, css, styleMap, classMap, addListener } from '@mantou/gem/lib/utils';
 
@@ -150,6 +151,7 @@ type State = {
 @customElement('dy-carousel')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
 export class DuoyunCarouselElement extends GemElement<State> {
   @part static img: string;
   @part static title: string;
@@ -175,10 +177,6 @@ export class DuoyunCarouselElement extends GemElement<State> {
     return this.interval || 3000;
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-  }
-
   state: State = {
     currentIndex: 0,
     direction: 1,
diff --git a/packages/duoyun-ui/src/elements/cascader-picker.ts b/packages/duoyun-ui/src/elements/cascader-picker.ts
index b6688555..87c8ab4a 100644
--- a/packages/duoyun-ui/src/elements/cascader-picker.ts
+++ b/packages/duoyun-ui/src/elements/cascader-picker.ts
@@ -8,6 +8,9 @@ import {
   boolattribute,
   state,
   emitter,
+  shadow,
+  focusable,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -61,6 +64,9 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
+@shadow()
+@focusable()
+@aria({ role: 'combobox' })
 export class DuoyunCascaderPickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute fit: boolean;
@@ -75,10 +81,9 @@ export class DuoyunCascaderPickerElement extends GemElement implements BasePicke
   @emitter expand: Emitter<Option>;
 
   constructor() {
-    super({ focusable: true });
+    super();
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.internals.role = 'combobox';
   }
 
   #cascader?: DuoyunCascaderElement;
diff --git a/packages/duoyun-ui/src/elements/chart-zoom.ts b/packages/duoyun-ui/src/elements/chart-zoom.ts
index 6da56525..97dc0fc8 100644
--- a/packages/duoyun-ui/src/elements/chart-zoom.ts
+++ b/packages/duoyun-ui/src/elements/chart-zoom.ts
@@ -176,6 +176,7 @@ export class DuoyunChartZoomElement extends GemElement<State> {
     const [start, stop] = this.#value;
     return html`
       <dy-area-chart
+        role="none"
         .smooth=${Number(this.values?.length) < 100}
         .aspectRatio=${this.#aspectRatio}
         .colors=${[theme.informativeColor]}
diff --git a/packages/duoyun-ui/src/elements/checkbox.ts b/packages/duoyun-ui/src/elements/checkbox.ts
index 3ab9027b..07a9a6ac 100644
--- a/packages/duoyun-ui/src/elements/checkbox.ts
+++ b/packages/duoyun-ui/src/elements/checkbox.ts
@@ -7,6 +7,8 @@ import {
   boolattribute,
   property,
   slot,
+  shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -72,6 +74,7 @@ const style = createCSSSheet(css`
 @customElement('dy-checkbox')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
 export class DuoyunCheckboxElement extends GemElement {
   @slot static unnamed: string;
 
@@ -82,7 +85,7 @@ export class DuoyunCheckboxElement extends GemElement {
   @attribute value: string;
 
   constructor() {
-    super({ delegatesFocus: true });
+    super();
     this.addEventListener('click', this.#onClick);
   }
 
@@ -114,6 +117,8 @@ export class DuoyunCheckboxElement extends GemElement {
  */
 @customElement('dy-checkbox-group')
 @adoptedStyle(groupStyle)
+@shadow()
+@aria({ role: 'group' })
 export class DuoyunCheckboxGroupElement extends GemElement {
   @attribute orientation: 'horizontal' | 'vertical';
   @boolattribute disabled: boolean;
@@ -121,11 +126,6 @@ export class DuoyunCheckboxGroupElement extends GemElement {
   @property value?: any[];
   @property options?: Option[];
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'group';
-  }
-
   #valueSet: Set<any>;
 
   #onChange = (evt: CustomEvent<boolean>, value: string) => {
diff --git a/packages/duoyun-ui/src/elements/collapse.ts b/packages/duoyun-ui/src/elements/collapse.ts
index 70e871da..40a77075 100644
--- a/packages/duoyun-ui/src/elements/collapse.ts
+++ b/packages/duoyun-ui/src/elements/collapse.ts
@@ -13,6 +13,8 @@ import {
   emitter,
   Emitter,
   slot,
+  shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, TemplateResult, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap, exportPartsMap } from '@mantou/gem/lib/utils';
@@ -78,6 +80,7 @@ type State = {
 @customElement('dy-collapse-panel')
 @adoptedStyle(panelStyle)
 @adoptedStyle(focusStyle)
+@aria({ role: 'listitem' })
 export class DuoyunCollapsePanelElement extends GemElement<State> {
   @refobject contentRef: RefObject<HTMLDivElement>;
 
@@ -91,11 +94,6 @@ export class DuoyunCollapsePanelElement extends GemElement<State> {
   @part static summary: string;
   @part static detail: string;
 
-  constructor() {
-    super();
-    this.internals.role = 'listitem';
-  }
-
   state: State = {
     preExpand: false,
     expand: false,
@@ -173,6 +171,8 @@ type CollapseItem = {
  */
 @customElement('dy-collapse')
 @adoptedStyle(style)
+@shadow()
+@aria({ role: 'list' })
 export class DuoyunCollapseElement extends GemElement {
   @part static panel: string;
   @part static summary: string;
@@ -186,11 +186,6 @@ export class DuoyunCollapseElement extends GemElement {
     return this.type || 'multi';
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'list';
-  }
-
   #onToggle = (evt: CustomEvent<boolean>) => {
     if (this.#type === 'single' && evt.detail) {
       [...this.shadowRoot!.querySelectorAll('dy-collapse-panel')].forEach((panel: DuoyunCollapsePanelElement) => {
diff --git a/packages/duoyun-ui/src/elements/color-panel.ts b/packages/duoyun-ui/src/elements/color-panel.ts
index 3e4275b8..250bea78 100644
--- a/packages/duoyun-ui/src/elements/color-panel.ts
+++ b/packages/duoyun-ui/src/elements/color-panel.ts
@@ -6,6 +6,7 @@ import {
   globalemitter,
   Emitter,
   boolattribute,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
@@ -183,6 +184,7 @@ type State = {
  */
 @customElement('dy-color-panel')
 @adoptedStyle(style)
+@aria({ role: 'widget' })
 export class DuoyunColorPanelElement extends GemElement<State> {
   @attribute value: HexColor;
   @boolattribute alpha: boolean;
@@ -201,11 +203,6 @@ export class DuoyunColorPanelElement extends GemElement<State> {
     }
   }
 
-  constructor() {
-    super();
-    this.internals.role = 'widget';
-  }
-
   state: State = {
     mode: 'Hex',
     grabbingHue: false,
diff --git a/packages/duoyun-ui/src/elements/color-picker.ts b/packages/duoyun-ui/src/elements/color-picker.ts
index 3c6495e5..09e1f6f6 100644
--- a/packages/duoyun-ui/src/elements/color-picker.ts
+++ b/packages/duoyun-ui/src/elements/color-picker.ts
@@ -8,6 +8,7 @@ import {
   boolattribute,
   refobject,
   RefObject,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
@@ -63,6 +64,7 @@ const style = createCSSSheet(css`
 @customElement('dy-color-picker')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
 export class DuoyunColorPickerElement extends GemElement implements BasePickerElement {
   @attribute value: HexColor;
   @boolattribute alpha: boolean;
@@ -71,10 +73,6 @@ export class DuoyunColorPickerElement extends GemElement implements BasePickerEl
 
   @globalemitter change: Emitter<HexColor>;
 
-  constructor() {
-    super({ delegatesFocus: true });
-  }
-
   render = () => {
     return html`
       <dy-popover
diff --git a/packages/duoyun-ui/src/elements/contextmenu.ts b/packages/duoyun-ui/src/elements/contextmenu.ts
index b5d827c5..b955f88d 100644
--- a/packages/duoyun-ui/src/elements/contextmenu.ts
+++ b/packages/duoyun-ui/src/elements/contextmenu.ts
@@ -1,4 +1,4 @@
-import { connectStore, adoptedStyle, customElement, refobject, RefObject } from '@mantou/gem/lib/decorators';
+import { connectStore, adoptedStyle, customElement, refobject, RefObject, shadow } from '@mantou/gem/lib/decorators';
 import { html, GemElement, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
 import { useStore } from '@mantou/gem/lib/store';
@@ -119,6 +119,7 @@ const style = createCSSSheet(css`
 @customElement('dy-contextmenu')
 @connectStore(contextmenuStore)
 @adoptedStyle(style)
+@shadow()
 export class DuoyunContextmenuElement extends GemElement {
   @refobject optionsRef: RefObject<DuoyunOptionsElement>;
 
@@ -195,10 +196,6 @@ export class DuoyunContextmenuElement extends GemElement {
     return [...this.shadowRoot!.querySelectorAll<HTMLElement>('.menu')];
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-  }
-
   #offset = 4;
 
   #onEnterMenu = (evt: PointerEvent, menuStackIndex: number, subMenu?: MenuOrMenuObject) => {
diff --git a/packages/duoyun-ui/src/elements/copy.ts b/packages/duoyun-ui/src/elements/copy.ts
index a912baf6..a0cf75a9 100644
--- a/packages/duoyun-ui/src/elements/copy.ts
+++ b/packages/duoyun-ui/src/elements/copy.ts
@@ -7,6 +7,7 @@ import {
   emitter,
   Emitter,
   slot,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
@@ -88,6 +89,7 @@ type State = {
 @customElement('dy-copy')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
 export class DuoyunCopyElement extends GemElement<State> {
   @slot static unnamed: string;
   @slot static after: string;
@@ -111,10 +113,6 @@ export class DuoyunCopyElement extends GemElement<State> {
     }
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-  }
-
   state: State = {
     status: 'none',
   };
diff --git a/packages/duoyun-ui/src/elements/date-panel.ts b/packages/duoyun-ui/src/elements/date-panel.ts
index 50a77997..c3702411 100644
--- a/packages/duoyun-ui/src/elements/date-panel.ts
+++ b/packages/duoyun-ui/src/elements/date-panel.ts
@@ -7,6 +7,8 @@ import {
   property,
   boolattribute,
   part,
+  shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap, exportPartsMap } from '@mantou/gem/lib/utils';
@@ -145,6 +147,8 @@ type State = {
 @customElement('dy-date-panel')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
+@aria({ role: 'widget' })
 export class DuoyunDatePanelElement extends GemElement<State> {
   @part static dayCell: string;
 
@@ -176,11 +180,6 @@ export class DuoyunDatePanelElement extends GemElement<State> {
     return highlights;
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'widget';
-  }
-
   state: State = {
     year: 0,
     month: 0,
diff --git a/packages/duoyun-ui/src/elements/date-picker.ts b/packages/duoyun-ui/src/elements/date-picker.ts
index f5571973..d51f4420 100644
--- a/packages/duoyun-ui/src/elements/date-picker.ts
+++ b/packages/duoyun-ui/src/elements/date-picker.ts
@@ -9,6 +9,8 @@ import {
   property,
   boolattribute,
   state,
+  focusable,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
@@ -69,6 +71,8 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
+@focusable()
+@aria({ role: 'combobox' })
 export class DuoyunDatePickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute time: boolean;
@@ -89,10 +93,9 @@ export class DuoyunDatePickerElement extends GemElement implements BasePickerEle
   }
 
   constructor() {
-    super({ focusable: true });
+    super();
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.internals.role = 'combobox';
   }
 
   #onSubmit = ({ detail }: CustomEvent<number>) => {
diff --git a/packages/duoyun-ui/src/elements/date-range-panel.ts b/packages/duoyun-ui/src/elements/date-range-panel.ts
index 51d37d43..36cc6779 100644
--- a/packages/duoyun-ui/src/elements/date-range-panel.ts
+++ b/packages/duoyun-ui/src/elements/date-range-panel.ts
@@ -1,4 +1,4 @@
-import { adoptedStyle, customElement, globalemitter, Emitter, property, part } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, globalemitter, Emitter, property, part, aria } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -43,17 +43,13 @@ type State = {
  */
 @customElement('dy-date-range-panel')
 @adoptedStyle(style)
+@aria({ role: 'widget' })
 export class DuoyunDateRangePanelElement extends GemElement<State> {
   @part static panel: string;
 
   @property value?: DateRangeValue;
   @globalemitter change: Emitter<number[]>;
 
-  constructor() {
-    super();
-    this.internals.role = 'widget';
-  }
-
   state: State = {};
 
   #onSelect = (evt: CustomEvent<number>) => {
diff --git a/packages/duoyun-ui/src/elements/date-range-picker.ts b/packages/duoyun-ui/src/elements/date-range-picker.ts
index 38695067..1a42dd23 100644
--- a/packages/duoyun-ui/src/elements/date-range-picker.ts
+++ b/packages/duoyun-ui/src/elements/date-range-picker.ts
@@ -8,6 +8,8 @@ import {
   property,
   boolattribute,
   state,
+  focusable,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
@@ -66,6 +68,8 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
+@focusable()
+@aria({ role: 'combobox' })
 export class DuoyunDateRangePickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute clearable: boolean;
@@ -78,10 +82,9 @@ export class DuoyunDateRangePickerElement extends GemElement implements BasePick
   @emitter clear: Emitter;
 
   constructor() {
-    super({ focusable: true });
+    super();
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.internals.role = 'combobox';
   }
 
   #onClear = (e: Event) => {
diff --git a/packages/duoyun-ui/src/elements/divider.ts b/packages/duoyun-ui/src/elements/divider.ts
index 05a9a70b..b4ae6ca6 100644
--- a/packages/duoyun-ui/src/elements/divider.ts
+++ b/packages/duoyun-ui/src/elements/divider.ts
@@ -1,5 +1,5 @@
 // https://spectrum.adobe.com/page/divider/
-import { adoptedStyle, customElement, attribute } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, aria } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -21,6 +21,7 @@ const style = createCSSSheet(css`
  */
 @customElement('dy-divider')
 @adoptedStyle(style)
+@aria({ role: 'separator' })
 export class DuoyunDividerElement extends GemElement {
   @attribute size: 'small' | 'medium' | 'large';
   @attribute color: string;
@@ -67,7 +68,6 @@ export class DuoyunDividerElement extends GemElement {
 
   constructor() {
     super();
-    this.internals.role = 'separator';
     this.effect(() => {
       this.internals.ariaOrientation = this.#orientation;
     });
diff --git a/packages/duoyun-ui/src/elements/drop-area.ts b/packages/duoyun-ui/src/elements/drop-area.ts
index b7423e99..2d9c06f7 100644
--- a/packages/duoyun-ui/src/elements/drop-area.ts
+++ b/packages/duoyun-ui/src/elements/drop-area.ts
@@ -7,6 +7,7 @@ import {
   Emitter,
   state,
   slot,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -53,6 +54,7 @@ const style = createCSSSheet(css`
  */
 @customElement('dy-drop-area')
 @adoptedStyle(style)
+@aria({ role: 'region' })
 export class DuoyunDropAreaElement extends GemElement {
   @slot static unnamed: string;
 
@@ -87,7 +89,6 @@ export class DuoyunDropAreaElement extends GemElement {
     this.addEventListener('dragover', this.#onDragover);
     this.addEventListener('dragleave', this.#onDragleave);
     this.addEventListener('drop', this.#onDrop);
-    this.internals.role = 'region';
   }
 
   #getValidFiles = (types: readonly string[], list: FileList) => {
diff --git a/packages/duoyun-ui/src/elements/file-picker.ts b/packages/duoyun-ui/src/elements/file-picker.ts
index 78e12e9a..9061831c 100644
--- a/packages/duoyun-ui/src/elements/file-picker.ts
+++ b/packages/duoyun-ui/src/elements/file-picker.ts
@@ -10,6 +10,7 @@ import {
   RefObject,
   part,
   slot,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
@@ -121,6 +122,7 @@ export interface FileItem extends File {
 @customElement('dy-file-picker')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
 export class DuoyunFilePickerElement extends GemElement implements BasePickerElement {
   @part static button: string;
   @part static item: string;
@@ -147,10 +149,6 @@ export class DuoyunFilePickerElement extends GemElement implements BasePickerEle
     return this.accept || (this.#type === 'image' ? 'image/*' : '*');
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-  }
-
   #onChange = () => {
     const input = this.inputRef.element!;
     if (!input.files) return;
diff --git a/packages/duoyun-ui/src/elements/form.ts b/packages/duoyun-ui/src/elements/form.ts
index b6065264..8f71965f 100644
--- a/packages/duoyun-ui/src/elements/form.ts
+++ b/packages/duoyun-ui/src/elements/form.ts
@@ -12,6 +12,8 @@ import {
   Emitter,
   emitter,
   numattribute,
+  shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -97,6 +99,8 @@ const formStyle = createCSSSheet(css`
  */
 @customElement('dy-form')
 @adoptedStyle(formStyle)
+@shadow({ mode: null })
+@aria({ role: 'form' })
 export class DuoyunFormElement<Data = Record<string, any>> extends GemElement {
   @boolattribute inline: boolean;
 
@@ -128,8 +132,7 @@ export class DuoyunFormElement<Data = Record<string, any>> extends GemElement {
   }
 
   constructor() {
-    super({ isLight: true });
-    this.internals.role = 'form';
+    super();
     this.addEventListener('itemchange', (evt: CustomEvent<{ name: string; value: string }>) => {
       evt.stopPropagation();
       const { name, value } = evt.detail;
@@ -154,11 +157,8 @@ export class DuoyunFormElement<Data = Record<string, any>> extends GemElement {
  * @customElement dy-form-item-inline-group
  */
 @customElement('dy-form-item-inline-group')
-export class DuoyunFormItemInlineGroupElement extends GemElement {
-  constructor() {
-    super({ isLight: true });
-  }
-}
+@shadow({ mode: null })
+export class DuoyunFormItemInlineGroupElement extends GemElement {}
 
 const formItemStyle = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
diff --git a/packages/duoyun-ui/src/elements/image-preview.ts b/packages/duoyun-ui/src/elements/image-preview.ts
index 111e2cda..55ec37c5 100644
--- a/packages/duoyun-ui/src/elements/image-preview.ts
+++ b/packages/duoyun-ui/src/elements/image-preview.ts
@@ -1,4 +1,4 @@
-import { adoptedStyle, customElement, attribute, property, numattribute } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, property, numattribute, shadow } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
 
@@ -80,6 +80,7 @@ export type ImageStatus = 'negative' | 'positive' | 'default';
 @customElement('dy-image-preview')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
 export class DuoyunImagePreviewElement extends GemElement<State> {
   @attribute status: ImageStatus;
   /**0-100 */
@@ -105,10 +106,6 @@ export class DuoyunImagePreviewElement extends GemElement<State> {
     }
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-  }
-
   state: State = {
     previewUrl: '',
   };
diff --git a/packages/duoyun-ui/src/elements/input.ts b/packages/duoyun-ui/src/elements/input.ts
index 4122ba91..3a666230 100644
--- a/packages/duoyun-ui/src/elements/input.ts
+++ b/packages/duoyun-ui/src/elements/input.ts
@@ -12,6 +12,8 @@ import {
   RefObject,
   state,
   part,
+  shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -164,6 +166,7 @@ const style = createCSSSheet(css`
 @customElement('dy-input')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
 export class DuoyunInputElement extends GemElement {
   @part static input: string;
   @part static clear: string;
@@ -222,10 +225,6 @@ export class DuoyunInputElement extends GemElement {
     return this.hasAttribute('max') ? this.max : Infinity;
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-  }
-
   #nextState = {
     value: '',
     selectionStart: 0,
@@ -442,9 +441,6 @@ const inputGroupStyle = createCSSSheet(css`
  */
 @customElement('dy-input-group')
 @adoptedStyle(inputGroupStyle)
-export class DuoyunInputGroupElement extends GemElement {
-  constructor() {
-    super({ isLight: true });
-    this.internals.role = 'group';
-  }
-}
+@shadow({ mode: null })
+@aria({ role: 'group' })
+export class DuoyunInputGroupElement extends GemElement {}
diff --git a/packages/duoyun-ui/src/elements/legend.ts b/packages/duoyun-ui/src/elements/legend.ts
index f0f74e53..4601fc6d 100644
--- a/packages/duoyun-ui/src/elements/legend.ts
+++ b/packages/duoyun-ui/src/elements/legend.ts
@@ -1,4 +1,4 @@
-import { adoptedStyle, customElement, emitter, Emitter, property } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, aria, customElement, emitter, Emitter, property } from '@mantou/gem/lib/decorators';
 import { html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
 
@@ -52,6 +52,7 @@ function getValue(legend: Legend) {
  */
 @customElement('dy-legend')
 @adoptedStyle(style)
+@aria({ ariaHidden: 'true' })
 export class DuoyunLegendElement extends DuoyunScrollBaseElement {
   @property colors = commonColors;
   @property legends?: Legend[] = [];
@@ -65,7 +66,6 @@ export class DuoyunLegendElement extends DuoyunScrollBaseElement {
   constructor() {
     super();
     this.addEventListener('wheel', this.#onWheel);
-    this.internals.ariaHidden = 'true';
   }
 
   #onWheel = (evt: WheelEvent) => {
diff --git a/packages/duoyun-ui/src/elements/list.ts b/packages/duoyun-ui/src/elements/list.ts
index 22666ce4..51d18309 100644
--- a/packages/duoyun-ui/src/elements/list.ts
+++ b/packages/duoyun-ui/src/elements/list.ts
@@ -11,6 +11,8 @@ import {
   Emitter,
   boolattribute,
   attribute,
+  shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { addListener, createCSSSheet, css, LinkedList, LinkedListItem, styled, styleMap } from '@mantou/gem/lib/utils';
@@ -72,6 +74,8 @@ const styles = createCSSSheet(css`
 @customElement('dy-list')
 @adoptedStyle(styles)
 @adoptedStyle(blockContainer)
+@shadow()
+@aria({ role: 'list' })
 export class DuoyunListElement extends GemElement<State> {
   @part static list: string;
   @part static item: string;
@@ -120,11 +124,6 @@ export class DuoyunListElement extends GemElement<State> {
     return this.#itemCountPerScreen - (this.state.renderList.length % this.#itemColumnCount);
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'list';
-  }
-
   state: State = {
     beforeHeight: 0,
     renderList: [],
@@ -595,6 +594,8 @@ const itemStyle = createCSSSheet({
 @customElement('dy-list-item')
 @adoptedStyle(blockContainer)
 @adoptedStyle(itemStyle)
+@shadow()
+@aria({ role: 'listitem' })
 export class DuoyunListItemElement extends DuoyunResizeBaseElement implements DuoyunVisibleBaseElement {
   @emitter show: Emitter;
   @emitter hide: Emitter;
@@ -608,8 +609,7 @@ export class DuoyunListItemElement extends DuoyunResizeBaseElement implements Du
   @property key?: any; // 提供另外一种方式来更新
 
   constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'listitem';
+    super();
     this.effect(
       () => visibilityObserver(this),
       () => [this.intersectionRoot],
diff --git a/packages/duoyun-ui/src/elements/map.ts b/packages/duoyun-ui/src/elements/map.ts
index d3bc1e74..b8331324 100644
--- a/packages/duoyun-ui/src/elements/map.ts
+++ b/packages/duoyun-ui/src/elements/map.ts
@@ -1,4 +1,4 @@
-import { adoptedStyle, customElement, emitter, Emitter, property, state, part } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, emitter, Emitter, property, state, part, aria } from '@mantou/gem/lib/decorators';
 import { html, svg } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
 import { geoProjection, geoMercatorRaw, geoEquirectangularRaw, GeoRawProjection, geoPath } from 'd3-geo';
@@ -155,6 +155,7 @@ export type AreaEventDetail = { name: string; originEvent: MouseEvent };
  */
 @customElement('dy-map')
 @adoptedStyle(style)
+@aria({ role: 'img' })
 export class DuoyunMapElement extends DuoyunLoadableBaseElement<State> {
   @part static map: string;
 
@@ -180,11 +181,6 @@ export class DuoyunMapElement extends DuoyunLoadableBaseElement<State> {
   @emitter arealeave: Emitter<AreaEventDetail>;
   @emitter areaclick: Emitter<AreaEventDetail>;
 
-  constructor() {
-    super();
-    this.internals.role = 'img';
-  }
-
   state: State = {};
 
   #projection: ReturnType<GeoCommonProjection>;
diff --git a/packages/duoyun-ui/src/elements/meter.ts b/packages/duoyun-ui/src/elements/meter.ts
index c525be37..0b0d1cb2 100644
--- a/packages/duoyun-ui/src/elements/meter.ts
+++ b/packages/duoyun-ui/src/elements/meter.ts
@@ -1,5 +1,5 @@
 // https://spectrum.adobe.com/page/meter/
-import { adoptedStyle, customElement, attribute, property, numattribute } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, property, numattribute, aria } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
 
@@ -48,6 +48,7 @@ const style = createCSSSheet(css`
  */
 @customElement('dy-meter')
 @adoptedStyle(style)
+@aria({ role: 'meter' })
 export class DuoyunMeterElement extends GemElement {
   /**range: 0-100 */
   @numattribute value: number;
@@ -92,7 +93,6 @@ export class DuoyunMeterElement extends GemElement {
 
   constructor() {
     super();
-    this.internals.role = 'meter';
     this.effect(() => {
       this.internals.ariaValueMin = String(this.min);
       this.internals.ariaValueMax = String(this.#max);
diff --git a/packages/duoyun-ui/src/elements/modal.ts b/packages/duoyun-ui/src/elements/modal.ts
index dadc3426..0310138c 100644
--- a/packages/duoyun-ui/src/elements/modal.ts
+++ b/packages/duoyun-ui/src/elements/modal.ts
@@ -12,6 +12,7 @@ import {
   part,
   state,
   slot,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { addListener, createCSSSheet, css, styled } from '@mantou/gem/lib/utils';
@@ -149,6 +150,7 @@ export interface ModalOpenOptions<T> {
 @adoptedStyle(style)
 @adoptedStyle(style2)
 @connectStore(locale)
+@shadow()
 export class DuoyunModalElement extends GemElement {
   @boolattribute open: boolean;
   @boolattribute customize: boolean;
@@ -225,7 +227,7 @@ export class DuoyunModalElement extends GemElement {
   }
 
   constructor(options: ModalOptions = {}) {
-    super({ delegatesFocus: true });
+    super();
     const {
       header,
       open,
diff --git a/packages/duoyun-ui/src/elements/more.ts b/packages/duoyun-ui/src/elements/more.ts
index 52811019..ccbc01e7 100644
--- a/packages/duoyun-ui/src/elements/more.ts
+++ b/packages/duoyun-ui/src/elements/more.ts
@@ -6,6 +6,7 @@ import {
   Emitter,
   boolattribute,
   slot,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { classMap, createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
@@ -47,6 +48,7 @@ type State = {
  */
 @customElement('dy-more')
 @adoptedStyle(style)
+@aria({ role: 'combobox' })
 export class DuoyunMoreElement extends GemElement<State> {
   @slot static unnamed: string;
 
@@ -62,7 +64,6 @@ export class DuoyunMoreElement extends GemElement<State> {
 
   constructor() {
     super();
-    this.internals.role = 'combobox';
     this.effect(() => {
       this.internals.ariaExpanded = String(this.state.expanded);
     });
@@ -99,14 +100,10 @@ export class DuoyunMoreElement extends GemElement<State> {
  * @customElement dy-more-slot
  */
 @customElement('dy-more-slot')
+@aria({ role: 'paragraph' })
 export class DuoyunMoreSlotElement extends DuoyunScrollBaseElement {
   @emitter change: Emitter<boolean>;
 
-  constructor() {
-    super();
-    this.internals.role = 'paragraph';
-  }
-
   mounted = () => {
     this.effect(() => {
       this.change(this.bottomOverflow);
diff --git a/packages/duoyun-ui/src/elements/options.ts b/packages/duoyun-ui/src/elements/options.ts
index 0accadb9..61706990 100644
--- a/packages/duoyun-ui/src/elements/options.ts
+++ b/packages/duoyun-ui/src/elements/options.ts
@@ -1,4 +1,12 @@
-import { adoptedStyle, customElement, property, boolattribute, slot } from '@mantou/gem/lib/decorators';
+import {
+  adoptedStyle,
+  customElement,
+  property,
+  boolattribute,
+  slot,
+  focusable,
+  aria,
+} from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
 
@@ -152,6 +160,8 @@ type State = {
 @customElement('dy-options')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@focusable()
+@aria({ role: 'listbox' })
 export class DuoyunOptionsElement extends GemElement<State> {
   @slot static unnamed: string;
 
@@ -165,11 +175,6 @@ export class DuoyunOptionsElement extends GemElement<State> {
     addValue: '',
   };
 
-  constructor() {
-    super({ focusable: true });
-    this.internals.role = 'listbox';
-  }
-
   #onSearch = ({ detail }: CustomEvent<string>) => {
     this.setState({ search: detail });
   };
diff --git a/packages/duoyun-ui/src/elements/page-loadbar.ts b/packages/duoyun-ui/src/elements/page-loadbar.ts
index 434dd5fb..92017ad2 100644
--- a/packages/duoyun-ui/src/elements/page-loadbar.ts
+++ b/packages/duoyun-ui/src/elements/page-loadbar.ts
@@ -1,4 +1,4 @@
-import { adoptedStyle, customElement } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, aria, customElement } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -34,6 +34,7 @@ const style = createCSSSheet(css`
  */
 @customElement('dy-page-loadbar')
 @adoptedStyle(style)
+@aria({ role: 'progressbar' })
 export class DuoyunPageLoadbarElement extends GemElement {
   static instance?: DuoyunPageLoadbarElement;
   static timer = 0;
@@ -62,11 +63,6 @@ export class DuoyunPageLoadbarElement extends GemElement {
     }
   }
 
-  constructor() {
-    super();
-    this.internals.role = 'progressbar';
-  }
-
   state = {
     progress: 0,
   };
diff --git a/packages/duoyun-ui/src/elements/pagination.ts b/packages/duoyun-ui/src/elements/pagination.ts
index c4bc03bc..f65a97d2 100644
--- a/packages/duoyun-ui/src/elements/pagination.ts
+++ b/packages/duoyun-ui/src/elements/pagination.ts
@@ -7,6 +7,8 @@ import {
   Emitter,
   property,
   numattribute,
+  shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
@@ -80,6 +82,8 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(locale)
+@shadow()
+@aria({ role: 'listbox', ariaLabel: 'Pagination' })
 export class DuoyunPaginationElement extends GemElement {
   @attribute align: 'left' | 'start' | 'right' | 'end' | 'center';
   @numattribute page: number;
@@ -95,12 +99,6 @@ export class DuoyunPaginationElement extends GemElement {
     return this.align || 'flex-end';
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'listbox';
-    this.internals.ariaLabel = 'Pagination';
-  }
-
   #offset = 2;
 
   #renderMore = (value: number) => {
diff --git a/packages/duoyun-ui/src/elements/paragraph.ts b/packages/duoyun-ui/src/elements/paragraph.ts
index 81bf0534..3157614d 100644
--- a/packages/duoyun-ui/src/elements/paragraph.ts
+++ b/packages/duoyun-ui/src/elements/paragraph.ts
@@ -1,4 +1,4 @@
-import { adoptedStyle, customElement, slot } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, aria, customElement, shadow, slot } from '@mantou/gem/lib/decorators';
 import { GemElement } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -46,11 +46,8 @@ const style = createCSSSheet(css`
  */
 @customElement('dy-paragraph')
 @adoptedStyle(style)
+@shadow({ mode: null })
+@aria({ role: 'paragraph' })
 export class DuoyunParagraphElement extends GemElement {
   @slot static unnamed: string;
-
-  constructor() {
-    super({ isLight: true });
-    this.internals.role = 'paragraph';
-  }
 }
diff --git a/packages/duoyun-ui/src/elements/picker.ts b/packages/duoyun-ui/src/elements/picker.ts
index 0222aa94..e54997e8 100644
--- a/packages/duoyun-ui/src/elements/picker.ts
+++ b/packages/duoyun-ui/src/elements/picker.ts
@@ -8,6 +8,8 @@ import {
   property,
   boolattribute,
   state,
+  focusable,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -112,6 +114,8 @@ export interface Option<T = any> {
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
+@focusable()
+@aria({ role: 'combobox' })
 export class DuoyunPickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute disabled: boolean;
@@ -126,10 +130,9 @@ export class DuoyunPickerElement extends GemElement implements BasePickerElement
   @globalemitter change: Emitter<any>;
 
   constructor() {
-    super({ focusable: true });
+    super();
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.internals.role = 'combobox';
   }
 
   #isContain = (value: any) => {
diff --git a/packages/duoyun-ui/src/elements/placeholder.ts b/packages/duoyun-ui/src/elements/placeholder.ts
index 2ec96044..c0085b0d 100644
--- a/packages/duoyun-ui/src/elements/placeholder.ts
+++ b/packages/duoyun-ui/src/elements/placeholder.ts
@@ -1,4 +1,12 @@
-import { adoptedStyle, customElement, attribute, boolattribute, numattribute, part } from '@mantou/gem/lib/decorators';
+import {
+  adoptedStyle,
+  customElement,
+  attribute,
+  boolattribute,
+  numattribute,
+  part,
+  aria,
+} from '@mantou/gem/lib/decorators';
 import { html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
 
@@ -36,6 +44,7 @@ const style = createCSSSheet(css`
  */
 @customElement('dy-placeholder')
 @adoptedStyle(style)
+@aria({ role: 'progressbar', ariaBusy: 'true' })
 export class DuoyunPlaceholderElement extends DuoyunVisibleBaseElement {
   @part static line: string;
 
@@ -65,12 +74,6 @@ export class DuoyunPlaceholderElement extends DuoyunVisibleBaseElement {
     return this.minLine || 1;
   }
 
-  constructor() {
-    super();
-    this.internals.role = 'progressbar';
-    this.internals.ariaBusy = 'true';
-  }
-
   render = () => {
     const lineCount =
       this.#type === 'single' ? 1 : Math.round(this.#minLine + Math.random() * (this.#maxLine - this.#minLine));
diff --git a/packages/duoyun-ui/src/elements/popover.ts b/packages/duoyun-ui/src/elements/popover.ts
index e96748f2..cb9bfac3 100644
--- a/packages/duoyun-ui/src/elements/popover.ts
+++ b/packages/duoyun-ui/src/elements/popover.ts
@@ -9,6 +9,7 @@ import {
   refobject,
   RefObject,
   part,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { addListener, createCSSSheet, css, styleMap, StyleObject } from '@mantou/gem/lib/utils';
@@ -65,6 +66,7 @@ type CloseCallback = {
  */
 @customElement('dy-popover')
 @adoptedStyle(contentsContainer)
+@shadow()
 export class DuoyunPopoverElement extends GemElement<PopoverState> {
   // 用于非继承样式通过 `inherit` 继承
   @part static slot: string;
@@ -152,7 +154,7 @@ export class DuoyunPopoverElement extends GemElement<PopoverState> {
   #hover = false;
 
   constructor(options: PopoverOptions = {}) {
-    super({ delegatesFocus: true });
+    super();
     const { delay = 500, content, position, ghostStyle, trigger, unreachable } = options;
     if (content) this.content = content;
     if (position) this.position = position;
diff --git a/packages/duoyun-ui/src/elements/progress.ts b/packages/duoyun-ui/src/elements/progress.ts
index 53c3753d..7e351ec9 100644
--- a/packages/duoyun-ui/src/elements/progress.ts
+++ b/packages/duoyun-ui/src/elements/progress.ts
@@ -1,4 +1,4 @@
-import { customElement, numattribute } from '@mantou/gem/lib/decorators';
+import { aria, customElement, numattribute } from '@mantou/gem/lib/decorators';
 
 import { theme } from '../lib/theme';
 
@@ -8,6 +8,7 @@ import { DuoyunMeterElement } from './meter';
  * @customElement dy-progress
  */
 @customElement('dy-progress')
+@aria({ role: 'progressbar' })
 export class DuoyunProgressElement extends DuoyunMeterElement {
   /**ms */
   @numattribute estimate: number;
@@ -15,7 +16,6 @@ export class DuoyunProgressElement extends DuoyunMeterElement {
   constructor() {
     super();
     this.#setNextValue();
-    this.internals.role = 'progressbar';
   }
 
   #setNextValue = () => {
diff --git a/packages/duoyun-ui/src/elements/radio.ts b/packages/duoyun-ui/src/elements/radio.ts
index 6fa4e977..d4504755 100644
--- a/packages/duoyun-ui/src/elements/radio.ts
+++ b/packages/duoyun-ui/src/elements/radio.ts
@@ -7,6 +7,8 @@ import {
   property,
   boolattribute,
   slot,
+  shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -59,6 +61,7 @@ const style = createCSSSheet(css`
 @customElement('dy-radio')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
 export class DuoyunRadioElement extends GemElement {
   @slot static unnamed: string;
 
@@ -69,7 +72,7 @@ export class DuoyunRadioElement extends GemElement {
   @attribute value: string;
 
   constructor() {
-    super({ delegatesFocus: true });
+    super();
     this.addEventListener('click', this.#onClick);
   }
 
@@ -122,6 +125,8 @@ export interface Option<T = any> {
  */
 @customElement('dy-radio-group')
 @adoptedStyle(groupStyle)
+@shadow()
+@aria({ role: 'radiogroup' })
 export class DuoyunRadioGroupElement extends GemElement {
   @attribute orientation: 'horizontal' | 'vertical';
   @boolattribute disabled: boolean;
@@ -129,11 +134,6 @@ export class DuoyunRadioGroupElement extends GemElement {
   @property value?: any;
   @property options?: Option[];
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'radiogroup';
-  }
-
   #onChange = (evt: CustomEvent<string>) => {
     evt.stopPropagation();
     this.change(evt.detail);
diff --git a/packages/duoyun-ui/src/elements/rate.ts b/packages/duoyun-ui/src/elements/rate.ts
index a5796ae1..2b9ace53 100644
--- a/packages/duoyun-ui/src/elements/rate.ts
+++ b/packages/duoyun-ui/src/elements/rate.ts
@@ -7,6 +7,8 @@ import {
   boolattribute,
   numattribute,
   part,
+  shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
@@ -65,6 +67,8 @@ const style = createCSSSheet(css`
 @customElement('dy-rate')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
+@aria({ role: 'range' })
 export class DuoyunRateElement extends GemElement {
   @part static star: string;
 
@@ -85,8 +89,7 @@ export class DuoyunRateElement extends GemElement {
   }
 
   constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'range';
+    super();
     this.effect(() => {
       this.internals.ariaDisabled = String(this.disabled);
       this.internals.ariaLabel = `${this.value}/${this.total}`;
diff --git a/packages/duoyun-ui/src/elements/segmented.ts b/packages/duoyun-ui/src/elements/segmented.ts
index 127f31fe..7094c063 100644
--- a/packages/duoyun-ui/src/elements/segmented.ts
+++ b/packages/duoyun-ui/src/elements/segmented.ts
@@ -2,11 +2,13 @@ import { GemElement, html } from '@mantou/gem/lib/element';
 import {
   Emitter,
   adoptedStyle,
+  aria,
   boolattribute,
   customElement,
   emitter,
   part,
   property,
+  shadow,
   state,
 } from '@mantou/gem/lib/decorators';
 import { classMap, createCSSSheet, css, partMap, styleMap } from '@mantou/gem/lib/utils';
@@ -109,6 +111,8 @@ export interface SegmentedOption<T = any> extends Option<T> {
  */
 @customElement('dy-segmented')
 @adoptedStyle(style)
+@shadow()
+@aria({ role: 'group' })
 export class DuoyunSegmentedElement extends GemElement {
   @part static segment: string;
   @part static icon: string;
@@ -124,11 +128,6 @@ export class DuoyunSegmentedElement extends GemElement {
   @property value?: any;
   @emitter change: Emitter<any>;
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'group';
-  }
-
   #onClick = (v: any) => {
     if (this.disabled) return;
     this.animating = true;
diff --git a/packages/duoyun-ui/src/elements/select.ts b/packages/duoyun-ui/src/elements/select.ts
index f5b0dc80..3ad15104 100644
--- a/packages/duoyun-ui/src/elements/select.ts
+++ b/packages/duoyun-ui/src/elements/select.ts
@@ -11,6 +11,7 @@ import {
   RefObject,
   state,
   part,
+  focusable,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { addListener, createCSSSheet, css, styleMap, StyleObject } from '@mantou/gem/lib/utils';
@@ -135,6 +136,7 @@ type State = {
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
+@focusable()
 export class DuoyunSelectElement extends GemElement<State> implements BasePickerElement {
   @boolattribute multiple: boolean;
   @boolattribute disabled: boolean;
@@ -182,7 +184,7 @@ export class DuoyunSelectElement extends GemElement<State> implements BasePicker
   }
 
   constructor() {
-    super({ focusable: true });
+    super();
     this.effect(() => {
       this.internals.role = this.inline ? null : 'combobox';
       this.internals.ariaExpanded = String(this.state.open);
diff --git a/packages/duoyun-ui/src/elements/shortcut-record.ts b/packages/duoyun-ui/src/elements/shortcut-record.ts
index 56aafdac..9eceaac4 100644
--- a/packages/duoyun-ui/src/elements/shortcut-record.ts
+++ b/packages/duoyun-ui/src/elements/shortcut-record.ts
@@ -8,6 +8,8 @@ import {
   boolattribute,
   part,
   emitter,
+  focusable,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -99,6 +101,8 @@ const style = createCSSSheet(css`
 @customElement('dy-shortcut-record')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@focusable()
+@aria({ role: 'input' })
 export class DuoyunShortcutRecordElement extends GemElement {
   @part static kbd: string;
 
@@ -116,8 +120,7 @@ export class DuoyunShortcutRecordElement extends GemElement {
   }
 
   constructor() {
-    super({ focusable: true });
-    this.internals.role = 'input';
+    super();
     this.addEventListener('keydown', this.#onKeydown);
   }
 
diff --git a/packages/duoyun-ui/src/elements/side-navigation.ts b/packages/duoyun-ui/src/elements/side-navigation.ts
index 6e985b36..6da3c64f 100644
--- a/packages/duoyun-ui/src/elements/side-navigation.ts
+++ b/packages/duoyun-ui/src/elements/side-navigation.ts
@@ -1,4 +1,13 @@
-import { connectStore, adoptedStyle, customElement, property, part, state } from '@mantou/gem/lib/decorators';
+import {
+  connectStore,
+  adoptedStyle,
+  customElement,
+  property,
+  part,
+  state,
+  aria,
+  shadow,
+} from '@mantou/gem/lib/decorators';
 import { html, TemplateResult } from '@mantou/gem/lib/element';
 import { history } from '@mantou/gem/lib/history';
 import { createCSSSheet, css, QueryString } from '@mantou/gem/lib/utils';
@@ -130,6 +139,8 @@ type State = Record<string, boolean>;
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(history.store)
+@shadow()
+@aria({ role: 'navigation', ariaLabel: 'Side Navigation' })
 export class DuoyunSideNavigationElement extends DuoyunScrollBaseElement<State> {
   @part static item: string;
   @part static group: string;
@@ -143,12 +154,6 @@ export class DuoyunSideNavigationElement extends DuoyunScrollBaseElement<State>
   // children open state
   state: State = {};
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'navigation';
-    this.internals.ariaLabel = 'Side Navigation';
-  }
-
   #onClickChildren = (title: string) => {
     this.setState({ [title]: !this.state[title] });
   };
diff --git a/packages/duoyun-ui/src/elements/slider.ts b/packages/duoyun-ui/src/elements/slider.ts
index 8838dfd6..8df133ff 100644
--- a/packages/duoyun-ui/src/elements/slider.ts
+++ b/packages/duoyun-ui/src/elements/slider.ts
@@ -10,6 +10,8 @@ import {
   numattribute,
   refobject,
   RefObject,
+  focusable,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
@@ -95,6 +97,8 @@ const style = createCSSSheet(css`
 @customElement('dy-slider')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@focusable()
+@aria({ role: 'slider' })
 export class DuoyunSliderElement extends GemElement {
   @attribute label: string;
   @attribute orientation: 'horizontal' | 'vertical';
@@ -134,8 +138,7 @@ export class DuoyunSliderElement extends GemElement {
   }
 
   constructor() {
-    super({ focusable: true });
-    this.internals.role = 'slider';
+    super();
     this.addEventListener('keydown', this.#onKeydown);
     this.effect(
       () => {
diff --git a/packages/duoyun-ui/src/elements/space.ts b/packages/duoyun-ui/src/elements/space.ts
index fd52c638..5dc05b69 100644
--- a/packages/duoyun-ui/src/elements/space.ts
+++ b/packages/duoyun-ui/src/elements/space.ts
@@ -1,4 +1,4 @@
-import { adoptedStyle, customElement, attribute } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, shadow } from '@mantou/gem/lib/decorators';
 import { GemElement } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -26,11 +26,8 @@ const style = createCSSSheet(css`
  */
 @customElement('dy-space')
 @adoptedStyle(style)
+@shadow({ mode: null })
 export class DuoyunSpaceElement extends GemElement {
   @attribute size: 'normal' | 'small' | 'large';
   @attribute orientation: 'horizontal' | 'vertical';
-
-  constructor() {
-    super({ isLight: true });
-  }
 }
diff --git a/packages/duoyun-ui/src/elements/statistic.ts b/packages/duoyun-ui/src/elements/statistic.ts
index 708f3cc6..8f0aa6b7 100644
--- a/packages/duoyun-ui/src/elements/statistic.ts
+++ b/packages/duoyun-ui/src/elements/statistic.ts
@@ -5,6 +5,7 @@ import {
   boolattribute,
   numattribute,
   property,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
@@ -77,6 +78,7 @@ export const formatFnMap: Record<StatisticType, (n: number) => { number: string;
  */
 @customElement('dy-statistic')
 @adoptedStyle(style)
+@aria({ role: 'group' })
 export class DuoyunStatisticElement extends GemElement {
   @attribute neutral: StatisticNeutral;
   @attribute type: StatisticType;
@@ -94,11 +96,6 @@ export class DuoyunStatisticElement extends GemElement {
     return this.type || 'decimal';
   }
 
-  constructor() {
-    super();
-    this.internals.role = 'group';
-  }
-
   render = () => {
     const { number, unit } = formatFnMap[this.#type](this.value);
 
diff --git a/packages/duoyun-ui/src/elements/status-light.ts b/packages/duoyun-ui/src/elements/status-light.ts
index 79f26008..ea11804e 100644
--- a/packages/duoyun-ui/src/elements/status-light.ts
+++ b/packages/duoyun-ui/src/elements/status-light.ts
@@ -1,4 +1,4 @@
-import { adoptedStyle, customElement, attribute, slot } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, slot, aria } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -45,16 +45,12 @@ export function getStatusColor(status: Status) {
  */
 @customElement('dy-status-light')
 @adoptedStyle(style)
+@aria({ role: 'status' })
 export class DuoyunStatusLightElement extends GemElement {
   @slot static unnamed: string;
 
   @attribute status: Status;
 
-  constructor() {
-    super();
-    this.internals.role = 'status';
-  }
-
   get #status() {
     return this.status || 'default';
   }
diff --git a/packages/duoyun-ui/src/elements/switch.ts b/packages/duoyun-ui/src/elements/switch.ts
index fc5927e2..381abd73 100644
--- a/packages/duoyun-ui/src/elements/switch.ts
+++ b/packages/duoyun-ui/src/elements/switch.ts
@@ -6,6 +6,7 @@ import {
   Emitter,
   boolattribute,
   slot,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -73,6 +74,7 @@ const style = createCSSSheet(css`
 @customElement('dy-switch')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
 export class DuoyunSwitchElement extends GemElement {
   @slot static unnamed: string;
 
@@ -89,7 +91,7 @@ export class DuoyunSwitchElement extends GemElement {
   }
 
   constructor() {
-    super({ delegatesFocus: true });
+    super();
     this.addEventListener('click', this.#onClick);
   }
 
diff --git a/packages/duoyun-ui/src/elements/table.ts b/packages/duoyun-ui/src/elements/table.ts
index 99d345db..050475b7 100644
--- a/packages/duoyun-ui/src/elements/table.ts
+++ b/packages/duoyun-ui/src/elements/table.ts
@@ -9,6 +9,7 @@ import {
   property,
   boolattribute,
   part,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap, classMap, StyleObject, isArrayChange } from '@mantou/gem/lib/utils';
@@ -155,6 +156,7 @@ export type ItemContextMenuEventDetail<T> = {
 @adoptedStyle(styles)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
+@shadow()
 export class DuoyunTableElement<T = any, K = any> extends DuoyunScrollBoxElement {
   @part static table: string;
   @part static th: string;
@@ -187,10 +189,6 @@ export class DuoyunTableElement<T = any, K = any> extends DuoyunScrollBoxElement
 
   #selectionSet = new Set<K>();
 
-  constructor() {
-    super({ delegatesFocus: true });
-  }
-
   #onSelectionBoxChange = ({ detail: { rect, mode } }: CustomEvent<SelectionChange>) => {
     const selection = new Set(mode === 'new' ? [] : this.#selectionSet);
     const boxWidth = rect.width;
diff --git a/packages/duoyun-ui/src/elements/tabs.ts b/packages/duoyun-ui/src/elements/tabs.ts
index 2144a522..005d5bc3 100644
--- a/packages/duoyun-ui/src/elements/tabs.ts
+++ b/packages/duoyun-ui/src/elements/tabs.ts
@@ -8,6 +8,8 @@ import {
   attribute,
   part,
   state,
+  shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, partMap, classMap, styleMap } from '@mantou/gem/lib/utils';
@@ -116,6 +118,8 @@ export interface TabItem<T = any> {
 @customElement('dy-tabs')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
+@aria({ role: 'tablist' })
 export class DuoyunTabsElement extends GemElement {
   @part static tabs: string;
   @part static tab: string;
@@ -135,11 +139,6 @@ export class DuoyunTabsElement extends GemElement {
     return this.orientation || 'horizontal';
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'tablist';
-  }
-
   render = () => {
     if (!this.items) return html``;
     let currentContent: TemplateResult | string = '';
@@ -223,12 +222,12 @@ const panelStyle = createCSSSheet(css`
  */
 @customElement('dy-tab-panel')
 @adoptedStyle(panelStyle)
+@aria({ role: 'tabpanel' })
 export class DuoyunTabPanelElement extends DuoyunScrollBaseElement {
   @state vertical: boolean;
 
   constructor() {
     super();
-    this.internals.role = 'tabpanel';
     this.addEventListener('change', (e) => e.stopPropagation());
     this.effect(() => {
       this.vertical = closestElement(this, DuoyunTabsElement)?.orientation === 'vertical';
diff --git a/packages/duoyun-ui/src/elements/tag.ts b/packages/duoyun-ui/src/elements/tag.ts
index d92e5513..af16984d 100644
--- a/packages/duoyun-ui/src/elements/tag.ts
+++ b/packages/duoyun-ui/src/elements/tag.ts
@@ -7,6 +7,8 @@ import {
   Emitter,
   boolattribute,
   slot,
+  shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -58,6 +60,8 @@ export type PresetColor = 'positive' | 'informative' | 'negative' | 'notice' | '
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
+@shadow()
+@aria({ role: 'mark' })
 export class DuoyunTagElement extends GemElement {
   @slot static unnamed: string;
 
@@ -86,11 +90,6 @@ export class DuoyunTagElement extends GemElement {
     return this.type || this.mode || 'solid';
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'mark';
-  }
-
   #onClose = (e: MouseEvent) => {
     e.stopPropagation();
     this.close(null);
diff --git a/packages/duoyun-ui/src/elements/time-panel.ts b/packages/duoyun-ui/src/elements/time-panel.ts
index dcc57426..c2080b7f 100644
--- a/packages/duoyun-ui/src/elements/time-panel.ts
+++ b/packages/duoyun-ui/src/elements/time-panel.ts
@@ -5,6 +5,7 @@ import {
   Emitter,
   property,
   boolattribute,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
@@ -57,6 +58,7 @@ const style = createCSSSheet(css`
 @customElement('dy-time-panel')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
 export class DuoyunTimePanelElement extends GemElement {
   @boolattribute headless: boolean;
   @globalemitter change: Emitter<number>;
@@ -71,10 +73,6 @@ export class DuoyunTimePanelElement extends GemElement {
     return isNotNullish(this.value) ? parseDate(this.value) : ({} as Partial<ReturnType<typeof parseDate>>);
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-  }
-
   #toArr = (l: number) => Array.from({ length: l }, (_, index) => index);
   #toString = (n: number) => n.toString().padStart(2, '0');
 
diff --git a/packages/duoyun-ui/src/elements/time-picker.ts b/packages/duoyun-ui/src/elements/time-picker.ts
index 604462f5..4b5b5389 100644
--- a/packages/duoyun-ui/src/elements/time-picker.ts
+++ b/packages/duoyun-ui/src/elements/time-picker.ts
@@ -8,6 +8,8 @@ import {
   property,
   boolattribute,
   state,
+  focusable,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
@@ -59,6 +61,8 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
+@focusable()
+@aria({ role: 'combobox' })
 export class DuoyunTimePickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute clearable: boolean;
@@ -78,10 +82,9 @@ export class DuoyunTimePickerElement extends GemElement implements BasePickerEle
   }
 
   constructor() {
-    super({ focusable: true });
+    super();
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.internals.role = 'combobox';
   }
 
   #onOpen = () => {
diff --git a/packages/duoyun-ui/src/elements/timeline.ts b/packages/duoyun-ui/src/elements/timeline.ts
index 0154e082..19c75eb3 100644
--- a/packages/duoyun-ui/src/elements/timeline.ts
+++ b/packages/duoyun-ui/src/elements/timeline.ts
@@ -1,5 +1,5 @@
 // https://ant.design/components/timeline/
-import { adoptedStyle, customElement, property } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, aria, customElement, property } from '@mantou/gem/lib/decorators';
 import { html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
 
@@ -66,14 +66,10 @@ type Item = {
  */
 @customElement('dy-timeline')
 @adoptedStyle(style)
+@aria({ role: 'list' })
 export class DuoyunTimelineElement extends DuoyunScrollBaseElement {
   @property events?: Item[];
 
-  constructor() {
-    super();
-    this.internals.role = 'list';
-  }
-
   render = () => {
     const events = this.events;
     if (!events) return html``;
diff --git a/packages/duoyun-ui/src/elements/toast.ts b/packages/duoyun-ui/src/elements/toast.ts
index e175c9cd..b566bc61 100644
--- a/packages/duoyun-ui/src/elements/toast.ts
+++ b/packages/duoyun-ui/src/elements/toast.ts
@@ -1,4 +1,4 @@
-import { adoptedStyle, customElement, property } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, aria, customElement, property } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
 import { repeat } from '@mantou/gem/lib/directives';
@@ -113,6 +113,7 @@ const removedSet = new WeakSet<ToastItem>();
  */
 @customElement('dy-toast')
 @adoptedStyle(style)
+@aria({ role: 'alert', ariaLive: 'polite' })
 export class DuoyunToastElement extends GemElement {
   @property items?: ToastItem[];
 
@@ -143,8 +144,6 @@ export class DuoyunToastElement extends GemElement {
 
   constructor() {
     super();
-    this.internals.role = 'alert';
-    this.internals.ariaLive = 'polite';
     if (Toast.instance) throw new Error('Single instance component');
     this.addEventListener('mouseover', () => {
       this.#over = new Promise((res) => {
diff --git a/packages/duoyun-ui/src/elements/tree.ts b/packages/duoyun-ui/src/elements/tree.ts
index 129b57e5..bcbcc73f 100644
--- a/packages/duoyun-ui/src/elements/tree.ts
+++ b/packages/duoyun-ui/src/elements/tree.ts
@@ -9,6 +9,9 @@ import {
   part,
   state,
   numattribute,
+  shadow,
+  aria,
+  focusable,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
@@ -100,6 +103,8 @@ const itemStyle = createCSSSheet(css`
  */
 @customElement('dy-tree-item')
 @adoptedStyle(itemStyle)
+@focusable()
+@aria({ role: 'treeitem' })
 class _DuoyunTreeItemElement extends GemElement {
   @boolattribute expanded: boolean;
   @boolattribute highlight: boolean;
@@ -110,11 +115,6 @@ class _DuoyunTreeItemElement extends GemElement {
 
   @state active: boolean;
 
-  constructor() {
-    super({ focusable: true });
-    this.internals.role = 'treeitem';
-  }
-
   render = () => {
     if (!this.item) return html``;
     const { label, children, childrenPlaceholder, icon, context, tags } = this.item;
@@ -156,6 +156,8 @@ export type MouseEventDetail = { value: any; item: TreeItem; originEvent: MouseE
 @customElement('dy-tree')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
+@aria({ role: 'tree' })
 export class DuoyunTreeElement extends GemElement<State> {
   @part static item: string;
 
@@ -174,11 +176,6 @@ export class DuoyunTreeElement extends GemElement<State> {
     return this.items || this.data;
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'tree';
-  }
-
   state: State = {
     expandItem: new Set(),
   };
diff --git a/packages/duoyun-ui/src/elements/wait.ts b/packages/duoyun-ui/src/elements/wait.ts
index d7377a97..96e21d56 100644
--- a/packages/duoyun-ui/src/elements/wait.ts
+++ b/packages/duoyun-ui/src/elements/wait.ts
@@ -1,4 +1,4 @@
-import { adoptedStyle, customElement, state } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, aria, customElement, state } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -94,6 +94,7 @@ type State = {
  */
 @customElement('dy-wait')
 @adoptedStyle(style)
+@aria({ role: 'alert', ariaBusy: 'true' })
 export class DuoyunWaitElement extends GemElement<State> {
   static instance?: DuoyunWaitElement;
   static wait = waitLoading;
@@ -105,8 +106,6 @@ export class DuoyunWaitElement extends GemElement<State> {
   constructor(initState: State = {}) {
     super();
     this.state = initState;
-    this.internals.role = 'alert';
-    this.internals.ariaBusy = 'true';
     this.addEventListener('contextmenu', (e) => e.preventDefault());
   }
 
diff --git a/packages/duoyun-ui/src/lib/element.ts b/packages/duoyun-ui/src/lib/element.ts
index 6f189aec..1be42ed3 100644
--- a/packages/duoyun-ui/src/lib/element.ts
+++ b/packages/duoyun-ui/src/lib/element.ts
@@ -1,4 +1,4 @@
-import { GemElement, gemSymbols } from '@mantou/gem/lib/element';
+import { GemElement, Metadata } from '@mantou/gem/lib/element';
 
 export function getBoundingClientRect(eleList: Element[]) {
   const rects = eleList.map((e) => e.getBoundingClientRect());
@@ -13,7 +13,7 @@ export function getBoundingClientRect(eleList: Element[]) {
 export function toggleActiveState(ele: Element | undefined | null, active: boolean) {
   if (!ele) return;
   if (ele instanceof GemElement) {
-    if (Reflect.get(ele.constructor, gemSymbols.definedCSSStates)?.includes('active')) {
+    if ((Reflect.get(ele.constructor, Symbol.metadata) as Metadata).definedCSSStates?.includes('active')) {
       (ele as any).active = active;
     }
     if (['button', 'combobox'].includes(ele.role || ele.internals.role || '')) {
diff --git a/packages/duoyun-ui/src/patterns/console.ts b/packages/duoyun-ui/src/patterns/console.ts
index d9322843..7ae8cdba 100644
--- a/packages/duoyun-ui/src/patterns/console.ts
+++ b/packages/duoyun-ui/src/patterns/console.ts
@@ -1,5 +1,5 @@
 import { GemElement, html } from '@mantou/gem/lib/element';
-import { adoptedStyle, attribute, boolattribute, customElement, property } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, attribute, boolattribute, customElement, property, shadow } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 import { ifDefined } from '@mantou/gem/lib/directives';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
@@ -177,6 +177,7 @@ const consoleStyle = createCSSSheet(css`
 @customElement('dy-pat-console')
 @adoptedStyle(style)
 @adoptedStyle(consoleStyle)
+@shadow({ mode: null })
 export class DyPatConsoleElement extends GemElement {
   @boolattribute keyboardAccess: boolean;
   @boolattribute screencastMode: boolean;
@@ -189,10 +190,6 @@ export class DyPatConsoleElement extends GemElement {
   @property contextMenus?: ContextMenus;
   @property userInfo?: UserInfo;
 
-  constructor() {
-    super({ isLight: true });
-  }
-
   #onLoading = () => {
     Loadbar.start();
   };
diff --git a/packages/duoyun-ui/src/patterns/footer.ts b/packages/duoyun-ui/src/patterns/footer.ts
index 31d63c00..d7911c8a 100644
--- a/packages/duoyun-ui/src/patterns/footer.ts
+++ b/packages/duoyun-ui/src/patterns/footer.ts
@@ -1,5 +1,5 @@
 import { GemElement, html } from '@mantou/gem/lib/element';
-import { Emitter, adoptedStyle, customElement, globalemitter, property } from '@mantou/gem/lib/decorators';
+import { Emitter, adoptedStyle, customElement, globalemitter, property, shadow } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
@@ -166,6 +166,7 @@ const mobileStyle = createCSSSheet(
 @adoptedStyle(mobileStyle)
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow({ mode: null })
 export class DyPatFooterElement extends GemElement {
   @property social?: Social;
   @property links?: Links;
@@ -178,10 +179,6 @@ export class DyPatFooterElement extends GemElement {
 
   @globalemitter languagechange: Emitter<string>;
 
-  constructor() {
-    super({ isLight: true });
-  }
-
   #isOutwardLink(href: string) {
     return new URL(href, location.origin).origin !== location.origin;
   }
diff --git a/packages/duoyun-ui/src/patterns/nav.ts b/packages/duoyun-ui/src/patterns/nav.ts
index df642ee3..693258d8 100644
--- a/packages/duoyun-ui/src/patterns/nav.ts
+++ b/packages/duoyun-ui/src/patterns/nav.ts
@@ -1,6 +1,14 @@
 import { history } from '@mantou/gem/lib/history';
 import { GemElement, TemplateResult, html, render } from '@mantou/gem/lib/element';
-import { adoptedStyle, attribute, connectStore, customElement, property, state } from '@mantou/gem/lib/decorators';
+import {
+  adoptedStyle,
+  attribute,
+  connectStore,
+  customElement,
+  property,
+  state,
+  shadow,
+} from '@mantou/gem/lib/decorators';
 import { addListener, classMap, createCSSSheet, css } from '@mantou/gem/lib/utils';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
@@ -189,6 +197,7 @@ type State = {
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(history.store)
+@shadow({ mode: null })
 export class DyPatNavElement extends GemElement<State> {
   @attribute name: string;
   @property links?: Links;
@@ -198,7 +207,7 @@ export class DyPatNavElement extends GemElement<State> {
   @state switching: boolean;
 
   constructor() {
-    super({ isLight: true });
+    super();
     const blur = () => {
       this.setState({ drawerOpen: false });
       (this.getRootNode() as any).activeElement?.blur();
diff --git a/packages/gem-analyzer/package.json b/packages/gem-analyzer/package.json
index 97c83ce1..d00fb9d0 100644
--- a/packages/gem-analyzer/package.json
+++ b/packages/gem-analyzer/package.json
@@ -18,7 +18,7 @@
   "devDependencies": {
     "@gemjs/config": "^1.6.14",
     "ts-morph": "^13.0.0",
-    "typescript": "^5.4.3"
+    "typescript": "^5.5.3"
   },
   "peerDependencies": {
     "ts-morph": "^13.0.0"
diff --git a/packages/gem-book/package.json b/packages/gem-book/package.json
index fbcdcb3c..adc9db06 100644
--- a/packages/gem-book/package.json
+++ b/packages/gem-book/package.json
@@ -58,7 +58,7 @@
     "sitemap-webpack-plugin": "^1.1.1",
     "string-replace-loader": "3.1.0",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.4.3",
+    "typescript": "^5.5.3",
     "webpack": "^5.89.0",
     "webpack-dev-server": "^4.15.1",
     "workbox-webpack-plugin": "^7.0.0",
diff --git a/packages/gem-book/src/element/elements/loadbar.ts b/packages/gem-book/src/element/elements/loadbar.ts
index 7fbfad7d..08ce56ee 100644
--- a/packages/gem-book/src/element/elements/loadbar.ts
+++ b/packages/gem-book/src/element/elements/loadbar.ts
@@ -1,4 +1,4 @@
-import { customElement } from '@mantou/gem/lib/decorators';
+import { aria, customElement } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 
 import { theme } from '../helper/theme';
@@ -7,6 +7,7 @@ import { theme } from '../helper/theme';
  * @customElement gem-book-loadbar
  */
 @customElement('gem-book-loadbar')
+@aria({ role: 'progressbar' })
 export class GemBookLoadbarElement extends GemElement {
   static instance?: GemBookLoadbarElement;
   static timer = 0;
@@ -15,6 +16,7 @@ export class GemBookLoadbarElement extends GemElement {
     clearInterval(Loadbar.timer);
     Loadbar.timer = window.setTimeout(() => {
       const instance = Loadbar.instance || new Loadbar();
+      if (!instance.isConnected) document.body.append(instance);
       instance.setState({ progress: 0 });
       Loadbar.timer = window.setInterval(() => {
         instance.setState({ progress: instance.state.progress + (95 - instance.state.progress) * 0.1 });
@@ -32,12 +34,6 @@ export class GemBookLoadbarElement extends GemElement {
     }
   }
 
-  constructor() {
-    super();
-    document.body.append(this);
-    this.internals.role = 'progressbar';
-  }
-
   state = {
     progress: 0,
   };
diff --git a/packages/gem-book/src/plugins/api.ts b/packages/gem-book/src/plugins/api.ts
index 34cd33c3..68736be3 100644
--- a/packages/gem-book/src/plugins/api.ts
+++ b/packages/gem-book/src/plugins/api.ts
@@ -9,7 +9,7 @@ type State = { elements?: ElementDetail[]; exports?: ExportDetail[]; error?: any
 
 customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof GemBookElement) => {
   const { Gem, theme, Utils } = GemBookPluginElement;
-  const { html, customElement, attribute, numattribute, createCSSSheet, css, adoptedStyle } = Gem;
+  const { html, customElement, attribute, numattribute, createCSSSheet, css, adoptedStyle, shadow } = Gem;
 
   const styles = createCSSSheet(css`
     gbp-api table {
@@ -29,6 +29,7 @@ customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof Ge
 
   @customElement('gbp-api')
   @adoptedStyle(styles)
+  @shadow({ mode: null })
   class _GbpApiElement extends GemBookPluginElement<State> {
     @attribute src: string;
     @attribute name: string;
@@ -39,7 +40,7 @@ customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof Ge
     }
 
     constructor() {
-      super({ isLight: true });
+      super();
       this.cacheState(() => [this.name, this.src]);
     }
 
diff --git a/packages/gem-book/src/plugins/include.ts b/packages/gem-book/src/plugins/include.ts
index eaa20335..69813f9e 100644
--- a/packages/gem-book/src/plugins/include.ts
+++ b/packages/gem-book/src/plugins/include.ts
@@ -7,15 +7,16 @@ type State = {
 
 customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof GemBookElement) => {
   const { Gem, theme, Utils } = GemBookPluginElement;
-  const { attribute, customElement, html } = Gem;
+  const { attribute, customElement, html, shadow } = Gem;
 
   @customElement('gbp-include')
+  @shadow({ mode: null })
   class _GbpIncludeElement extends GemBookPluginElement<State> {
     @attribute src: string;
     @attribute range: string;
 
     constructor() {
-      super({ isLight: true });
+      super();
       this.cacheState(() => [this.src, this.range]);
     }
 
diff --git a/packages/gem-book/src/plugins/trans-status.ts b/packages/gem-book/src/plugins/trans-status.ts
index 02619085..15f9bc96 100644
--- a/packages/gem-book/src/plugins/trans-status.ts
+++ b/packages/gem-book/src/plugins/trans-status.ts
@@ -16,9 +16,10 @@ const locales: Record<string, Record<Status, string>> = {
 
 customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof GemBookElement) => {
   const { Gem, Utils, selfI18n } = GemBookPluginElement;
-  const { html, customElement, attribute } = Gem;
+  const { html, customElement, attribute, shadow } = Gem;
 
   @customElement('gbp-trans-status')
+  @shadow({ mode: null })
   class _GbpTransStatusElement extends GemBookPluginElement {
     @attribute status: Status;
 
@@ -26,10 +27,6 @@ customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof Ge
       return this.status || 'none';
     }
 
-    constructor() {
-      super({ isLight: true });
-    }
-
     render() {
       const langPkg = locales[GemBookPluginElement.lang || selfI18n.fallbackLanguage];
       return html`${Utils.parseMarkdown(
diff --git a/packages/gem-devtools/src/scripts/get-gem.ts b/packages/gem-devtools/src/scripts/get-gem.ts
index 4405df08..dac20997 100644
--- a/packages/gem-devtools/src/scripts/get-gem.ts
+++ b/packages/gem-devtools/src/scripts/get-gem.ts
@@ -1,4 +1,4 @@
-import type { GemElement, SheetToken, Sheet, Store } from '@mantou/gem';
+import type { GemElement, SheetToken, Metadata } from '@mantou/gem';
 
 import type { PanelStore } from '../store';
 
@@ -18,13 +18,8 @@ export const getSelectedGem = function (data: PanelStore): PanelStore | string {
   }
 
   const tagClass = $0.constructor as typeof GemElement;
-  const { get } = Reflect;
-  // support v1
-  const gemSymbols = new Proxy(get(__GEM_DEVTOOLS__HOOK__ || {}, 'gemSymbols') || {}, {
-    get(target, p) {
-      return get(target, p) || p;
-    },
-  });
+  // Partial supports V1
+  const metadata = (Reflect.get(tagClass, Symbol.for('Symbol.metadata')) || tagClass) as Metadata;
 
   const inspectable = (value: any) => {
     const type = typeof value;
@@ -121,7 +116,7 @@ export const getSelectedGem = function (data: PanelStore): PanelStore | string {
   const buildInProperty = new Set(['internals']);
   const buildInAttribute = new Set(['ref']);
   const memberSet = getProps($0);
-  get(tagClass, gemSymbols.observedAttributes)?.forEach((attr: string) => {
+  metadata.observedAttributes?.forEach((attr) => {
     const prop = kebabToCamelCase(attr);
     const value = $0[prop];
     memberSet.delete(prop);
@@ -142,7 +137,7 @@ export const getSelectedGem = function (data: PanelStore): PanelStore | string {
       buildIn: buildInAttribute.has(attr) ? 1 : 0,
     });
   });
-  get(tagClass, gemSymbols.observedProperties)?.forEach((prop: string) => {
+  metadata.observedProperties?.forEach((prop) => {
     memberSet.delete(prop);
     const value = $0[prop];
     const type = value === null ? 'null' : typeof value;
@@ -153,7 +148,7 @@ export const getSelectedGem = function (data: PanelStore): PanelStore | string {
       path: inspectable(value) ? [prop] : undefined,
     });
   });
-  get(tagClass, gemSymbols.definedEvents)?.forEach((event: string) => {
+  metadata.definedEvents?.forEach((event) => {
     const prop = kebabToCamelCase(event);
     memberSet.delete(prop);
     data.emitters.push({
@@ -163,23 +158,23 @@ export const getSelectedGem = function (data: PanelStore): PanelStore | string {
       path: [prop],
     });
   });
-  get(tagClass, gemSymbols.adoptedStyleSheets)?.forEach((sheet: Sheet<unknown>, index: number) => {
+  metadata.adoptedStyleSheets?.forEach((sheet, index) => {
     data.adoptedStyles.push({
       name: `StyleSheet${index + 1}`,
       value: objectToString(sheet[Object.getOwnPropertySymbols(sheet)[0] as typeof SheetToken]),
       type: 'object',
-      path: ['constructor', 'gem@adoptedStyleSheets', String(index)],
+      path: ['constructor', 'Symbol.metadata', 'adoptedStyleSheets', String(index)],
     });
   });
-  get(tagClass, gemSymbols.observedStores)?.forEach((store: Store<unknown>, index: number) => {
+  metadata.observedStores?.forEach((store, index) => {
     data.observedStores.push({
       name: `Store${index + 1}`,
       value: objectToString(store),
       type: 'object',
-      path: ['constructor', 'gem@observedStores', String(index)],
+      path: ['constructor', 'Symbol.metadata', 'observedStores', String(index)],
     });
   });
-  get(tagClass, gemSymbols.definedSlots)?.forEach((slot: string) => {
+  metadata.definedSlots?.forEach((slot) => {
     const isUnnamed = slot === 'unnamed';
     const prop = kebabToCamelCase(slot);
     if (!$0.constructor[prop]) {
@@ -199,7 +194,7 @@ export const getSelectedGem = function (data: PanelStore): PanelStore | string {
       path: isNode ? ['firstChild'] : element ? ['querySelector', selector] : undefined,
     });
   });
-  get(tagClass, gemSymbols.definedParts)?.forEach((part: string) => {
+  metadata.definedParts?.forEach((part) => {
     const prop = kebabToCamelCase(part);
     if (!$0.constructor[prop]) {
       memberSet.delete(prop);
@@ -212,7 +207,7 @@ export const getSelectedGem = function (data: PanelStore): PanelStore | string {
       path: [['shadowRoot', ''], 'querySelector', selector],
     });
   });
-  get(tagClass, gemSymbols.definedRefs)?.forEach((ref: string) => {
+  metadata.definedRefs?.forEach((ref) => {
     const prop = kebabToCamelCase(ref.replace(/-\w+$/, ''));
     memberSet.delete(prop);
     data.refs.push({
@@ -222,7 +217,7 @@ export const getSelectedGem = function (data: PanelStore): PanelStore | string {
       path: [['shadowRoot', ''], 'querySelector', `[ref=${$0[prop].ref}]`],
     });
   });
-  get(tagClass, gemSymbols.definedCSSStates)?.forEach((state: string) => {
+  metadata.definedCSSStates?.forEach((state) => {
     const prop = kebabToCamelCase(state);
     memberSet.delete(prop);
     data.cssStates.push({
@@ -280,8 +275,8 @@ export const getSelectedGem = function (data: PanelStore): PanelStore | string {
     Object.getOwnPropertyNames(cls).forEach((key) => {
       if (
         !buildInStaticMember.has(key) &&
-        !get(tagClass, gemSymbols.definedParts)?.includes(cls[key]) &&
-        !get(tagClass, gemSymbols.definedSlots)?.includes(cls[key])
+        !metadata.definedParts?.includes(cls[key]) &&
+        !metadata.definedSlots?.includes(cls[key])
       ) {
         set.add(key);
       }
diff --git a/packages/gem-devtools/src/scripts/preload.ts b/packages/gem-devtools/src/scripts/preload.ts
index d4ee8cff..af3aedf6 100644
--- a/packages/gem-devtools/src/scripts/preload.ts
+++ b/packages/gem-devtools/src/scripts/preload.ts
@@ -19,7 +19,7 @@ export function preload() {
     // 只有 constructor 函数会当成对象读取
     readProp(path) {
       return path.reduce((p, k, index) => {
-        const c = typeof k === 'string' && k.startsWith('gem@') ? Symbol.for(k) : k;
+        const c = typeof k === 'string' && (k.startsWith('gem@') || k.startsWith('Symbol.')) ? Symbol.for(k) : k;
         if (typeof p === 'function' && path[index - 1] !== 'constructor') {
           if (Array.isArray(c)) {
             return p(...c);
diff --git a/packages/gem-examples/src/async/index.ts b/packages/gem-examples/src/async/index.ts
index 95a0ac8b..232f37f5 100644
--- a/packages/gem-examples/src/async/index.ts
+++ b/packages/gem-examples/src/async/index.ts
@@ -1,16 +1,22 @@
-import { GemElement, adoptedStyle, createCSSSheet, customElement, html, numattribute, render } from '@mantou/gem';
+import {
+  GemElement,
+  adoptedStyle,
+  async,
+  createCSSSheet,
+  customElement,
+  html,
+  numattribute,
+  render,
+} from '@mantou/gem';
 
 import '../elements/layout';
 
 @adoptedStyle(createCSSSheet(`:host {display: block}`))
 @customElement('app-post')
+@async()
 export class Post extends GemElement {
   @numattribute index: number;
 
-  constructor() {
-    super({ isAsync: true });
-  }
-
   render() {
     console.log(`render ${this.index}`);
 
diff --git a/packages/gem-examples/src/homepage/index.ts b/packages/gem-examples/src/homepage/index.ts
index a60e71ea..5244f179 100644
--- a/packages/gem-examples/src/homepage/index.ts
+++ b/packages/gem-examples/src/homepage/index.ts
@@ -1,5 +1,5 @@
 import { render, html, GemElement } from '@mantou/gem/lib/element';
-import { customElement } from '@mantou/gem/lib/decorators';
+import { customElement, shadow } from '@mantou/gem/lib/decorators';
 import { history } from '@mantou/gem/lib/history';
 import type { Help, Links, Social, Terms, Languages } from 'duoyun-ui/patterns/footer';
 import { I18n } from '@mantou/gem/helper/i18n';
@@ -18,11 +18,8 @@ const i18n = new I18n({
 });
 
 @customElement('my-homepage')
+@shadow({ mode: null })
 export class MyHomepage extends GemElement {
-  constructor() {
-    super({ isLight: true });
-  }
-
   #social: Social = {
     label: 'Follow us',
     items: [
diff --git a/packages/gem-examples/src/light-dom/index.ts b/packages/gem-examples/src/light-dom/index.ts
index aeddd1f1..d959e368 100644
--- a/packages/gem-examples/src/light-dom/index.ts
+++ b/packages/gem-examples/src/light-dom/index.ts
@@ -1,12 +1,13 @@
-import { GemElement, customElement, html, render } from '@mantou/gem';
+import { GemElement, customElement, html, render, shadow } from '@mantou/gem';
 
 import '../elements/layout';
 
 @customElement('app-root')
+@shadow({ mode: null })
 export class App extends GemElement {
   state = { now: 0 };
   constructor() {
-    super({ isLight: true });
+    super();
     setInterval(() => {
       this.setState({ now: Date.now() });
     }, 1000);
diff --git a/packages/gem-examples/src/perf-demo/index.ts b/packages/gem-examples/src/perf-demo/index.ts
index 1ac55ed5..28e2252a 100644
--- a/packages/gem-examples/src/perf-demo/index.ts
+++ b/packages/gem-examples/src/perf-demo/index.ts
@@ -1,4 +1,4 @@
-import { GemElement, connectStore, customElement, html, property, render, useStore } from '@mantou/gem';
+import { GemElement, async, connectStore, customElement, html, property, render, useStore } from '@mantou/gem';
 
 import '../elements/layout';
 
@@ -12,9 +12,10 @@ setInterval(() => {
 
 @customElement('fiber-dot')
 @connectStore(store)
+@async()
 export class Dot extends GemElement {
   constructor() {
-    super({ isAsync: true });
+    super();
     this.addEventListener('mouseenter', this.onMouseenter);
     this.addEventListener('mouseleave', this.onMouseleave);
   }
diff --git a/packages/gem-examples/src/scope/index.ts b/packages/gem-examples/src/scope/index.ts
index 794dd19f..d64a2d53 100644
--- a/packages/gem-examples/src/scope/index.ts
+++ b/packages/gem-examples/src/scope/index.ts
@@ -1,7 +1,7 @@
 /**
  * TODO: auto add `@scope` to light dom custom element
  */
-import { GemElement, adoptedStyle, createCSSSheet, css, customElement, html, render } from '@mantou/gem';
+import { GemElement, adoptedStyle, createCSSSheet, css, customElement, html, render, shadow } from '@mantou/gem';
 
 import '../elements/layout';
 
@@ -18,10 +18,8 @@ const style = createCSSSheet(css`
 
 @customElement('app-root')
 @adoptedStyle(style)
+@shadow({ mode: null })
 export class App extends GemElement {
-  constructor() {
-    super({ isLight: true });
-  }
   render() {
     return html`
       Text
diff --git a/packages/gem-port/package.json b/packages/gem-port/package.json
index 8081cf3a..5f662799 100644
--- a/packages/gem-port/package.json
+++ b/packages/gem-port/package.json
@@ -23,7 +23,7 @@
     "commander": "^7.2.0",
     "gem-analyzer": "^1.7.9",
     "ts-morph": "^13.0.0",
-    "typescript": "^5.4.3"
+    "typescript": "^5.5.3"
   },
   "author": "mantou132",
   "license": "MIT",
diff --git a/packages/gem/docs/en/003-api/001-gem-element.md b/packages/gem/docs/en/003-api/001-gem-element.md
index be8cd8f7..76fa25ab 100644
--- a/packages/gem/docs/en/003-api/001-gem-element.md
+++ b/packages/gem/docs/en/003-api/001-gem-element.md
@@ -6,21 +6,11 @@ navTitle: API
 
 ```ts
 class GemElement<State> extends HTMLElement {
-  constructor(options?: { isLight: boolean; isAsync: boolean }): GemElement;
+  constructor(): GemElement;
   // ...
 }
 ```
 
-## Construction parameters
-
-| name             | description                                                               |
-| ---------------- | ------------------------------------------------------------------------- |
-| `isLight`        | Whether to render as Light DOM                                            |
-| `isAsync`        | Whether to use non-blocking rendering mode                                |
-| `focusable`      | Make elements focusable using `tabIndex`                                  |
-| `delegatesFocus` | When the element attempts to focus, the automatic proxy to the focus part |
-| `slotAssignment` | Allow manual allocation of slot                                           |
-
 ## Lifecycle hook
 
 | name           | description                                                                               |
diff --git a/packages/gem/docs/en/003-api/007-decorator.md b/packages/gem/docs/en/003-api/007-decorator.md
index d27060d9..ddfc3d06 100644
--- a/packages/gem/docs/en/003-api/007-decorator.md
+++ b/packages/gem/docs/en/003-api/007-decorator.md
@@ -18,6 +18,10 @@ In order to integrate TypeScript more conveniently, Gem has many built-in decora
 | `@slot`          | Field decorator, [`slot`][2] that defines the element                        |
 | `@part`          | Field decorator, [`part`][3] that defines the element                        |
 | `@rootElement`   | Specify the [root element][9] name                                           |
+| `@shadow`        | Use [ShadowDOM](10)                                                          |
+| `@async`         | Use no blocking render                                                       |
+| `@aria`          | Specify the [accessibility](11) info                                         |
+| `@focusable`     | Specify element is focusable                                                 |
 
 [1]: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/custom-states-and-state-pseudo-class.md
 [2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot
@@ -28,6 +32,8 @@ In order to integrate TypeScript more conveniently, Gem has many built-in decora
 [7]: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
 [8]: https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles
 [9]: https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode
+[10]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM
+[11]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#instance_properties_included_from_aria
 
 _Except for `@property`, all fields decorated by decorators have default values, `@attribute`/`@boolattribute`/`@numattribute`/`@state`/`@slot`/`@part` the value of the decorated field will be automatically converted to kebab-case. Please use the kebab-case value when you use it outside the element outside_
 
diff --git a/packages/gem/docs/en/004-blog/001-create-standard-element.md b/packages/gem/docs/en/004-blog/001-create-standard-element.md
index eb84be48..46db425f 100644
--- a/packages/gem/docs/en/004-blog/001-create-standard-element.md
+++ b/packages/gem/docs/en/004-blog/001-create-standard-element.md
@@ -164,15 +164,12 @@ const style = createCSSSheet(css`
 class MyElement extends GemElement {}
 ```
 
-If you need to render many instances at once, you can use `isAsync` to create asynchronous rendering elements, which can avoid blocking the main thread during rendering and guarantee 60fps:
+If you need to render many instances at once, you can use `@async` to create asynchronous rendering elements, which can avoid blocking the main thread during rendering and guarantee 60fps:
 
 ```ts
 @customElement('my-element')
-class MyElement extends GemElement {
-  constructor() {
-    super({ isAsync: true });
-  }
-}
+@async()
+class MyElement extends GemElement {}
 ```
 
 ## Styling
@@ -205,18 +202,15 @@ When users use custom elements, they can use the `role`,`aria-*` attributes to s
 html`<my-element role="region" aria-label="my profile"></my-element>`;
 ```
 
-Use [`ElementInternals`](https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals) to define the default semantics of custom elements, use [`delegatesFocus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#delegatesfocus) or `focusable` focus:
+Use [`ElementInternals`](https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals) to define the default semantics of custom elements, use [`delegatesFocus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#delegatesfocus) or `@focusable` focus:
 
 ```ts
 @customElement('my-element')
+@focusable()
+@aria({ role: 'region', ariaLabel: 'my profile' })
 class MyElement extends GemElement {
   @boolattribute disabled: boolean;
-  constructor() {
-    // or super({ focusable: true });
-    super({ delegatesFocus: true });
-    this.internals.role = 'region';
-    this.internals.ariaLabel = 'my profile';
-  }
+
   render() {
     return html`<div tabindex=${-Number(this.disabled)}>Focusable</div>`;
   }
diff --git a/packages/gem/docs/zh/003-api/001-gem-element.md b/packages/gem/docs/zh/003-api/001-gem-element.md
index 25ca78b0..7dac5ffe 100644
--- a/packages/gem/docs/zh/003-api/001-gem-element.md
+++ b/packages/gem/docs/zh/003-api/001-gem-element.md
@@ -6,21 +6,11 @@ navTitle: API
 
 ```ts
 class GemElement<State> extends HTMLElement {
-  constructor(options?: { isLight: boolean; isAsync: boolean }): GemElement;
+  constructor(): GemElement;
   // ...
 }
 ```
 
-## 构造参数
-
-| 名称             | 描述                                 |
-| ---------------- | ------------------------------------ |
-| `isLight`        | 是否渲染成 Light DOM                 |
-| `isAsync`        | 是否使用非阻塞渲染模式               |
-| `focusable`      | 使用 `tabIndex` 让元素可聚焦         |
-| `delegatesFocus` | 当元素尝试聚焦时自动代理到可聚焦部分 |
-| `slotAssignment` | 允许手动分配插槽                     |
-
 ## 生命周期钩子
 
 | 名称           | 描述                                        |
diff --git a/packages/gem/docs/zh/003-api/007-decorator.md b/packages/gem/docs/zh/003-api/007-decorator.md
index 93c5c545..9fbecccb 100644
--- a/packages/gem/docs/zh/003-api/007-decorator.md
+++ b/packages/gem/docs/zh/003-api/007-decorator.md
@@ -18,6 +18,10 @@
 | `@slot`          | 字段装饰器，定义元素的 [`slot`][2]                           |
 | `@part`          | 字段装饰器，定义元素的 [`part`][3]                           |
 | `@rootElement`   | 指定[根元素][9]名称                                          |
+| `@shadow`        | 使用 [ShadowDOM](10)                                         |
+| `@async`         | 使用非阻塞渲染                                               |
+| `@aria`          | 指定[可访问性](11)信息                                       |
+| `@focusable`     | 指定元素为可聚焦                                             |
 
 [1]: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/custom-states-and-state-pseudo-class.md
 [2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot
@@ -28,6 +32,8 @@
 [7]: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
 [8]: https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles
 [9]: https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode
+[10]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM
+[11]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#instance_properties_included_from_aria
 
 _除 `@property` 外其他装饰器装饰的字段都有默认值，`@attribute`/`@boolattribute`/`@numattribute`/`@state`/`@slot`/`@part` 装饰的字段的值都将自动进行烤串式转换，在元素外部使用时请使用对应的烤串式值_
 
diff --git a/packages/gem/docs/zh/004-blog/001-create-standard-element.md b/packages/gem/docs/zh/004-blog/001-create-standard-element.md
index 33db0175..f3c71646 100644
--- a/packages/gem/docs/zh/004-blog/001-create-standard-element.md
+++ b/packages/gem/docs/zh/004-blog/001-create-standard-element.md
@@ -164,15 +164,12 @@ const style = createCSSSheet(css`
 class MyElement extends GemElement {}
 ```
 
-如果需要一次渲染许多实例，可以使用 `isAsync` 来创建异步渲染元素，它能避免渲染时阻塞主线程，保证 60fps：
+如果需要一次渲染许多实例，可以使用 `@async` 来创建异步渲染元素，它能避免渲染时阻塞主线程，保证 60fps：
 
 ```ts
 @customElement('my-element')
-class MyElement extends GemElement {
-  constructor() {
-    super({ isAsync: true });
-  }
-}
+@async()
+class MyElement extends GemElement {}
 ```
 
 ## 样式
@@ -205,18 +202,15 @@ html`<my-element hidden>My content</my-element>`;
 html`<my-element role="region" aria-label="my profile"></my-element>`;
 ```
 
-使用 [`ElementInternals`](https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals) 可以定义自定义元素的默认语义，用 [`delegatesFocus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#delegatesfocus) 或者 `focusable` 处理聚焦：
+使用 [`ElementInternals`](https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals) 可以定义自定义元素的默认语义，用 [`delegatesFocus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#delegatesfocus) 或者 `@focusable` 处理聚焦：
 
 ```ts
 @customElement('my-element')
+@focusable()
+@aria({ role: 'region', ariaLabel: 'my profile' })
 class MyElement extends GemElement {
   @boolattribute disabled: boolean;
-  constructor() {
-    // or super({ focusable: true });
-    super({ delegatesFocus: true });
-    this.internals.role = 'region';
-    this.internals.ariaLabel = 'my profile';
-  }
+
   render() {
     return html`<div tabindex=${-Number(this.disabled)}>Focusable</div>`;
   }
diff --git a/packages/gem/package.json b/packages/gem/package.json
index ab3ee26d..9a8bf482 100644
--- a/packages/gem/package.json
+++ b/packages/gem/package.json
@@ -49,7 +49,7 @@
     "@web/dev-server-esbuild": "^1.0.2",
     "@web/test-runner": "^0.18.1",
     "rimraf": "^3.0.2",
-    "typescript": "^5.4.3",
+    "typescript": "^5.5.3",
     "vite": "^5.2.10"
   },
   "author": "mantou132",
diff --git a/packages/gem/src/elements/base/dialog.ts b/packages/gem/src/elements/base/dialog.ts
index dded6a33..3cc4521e 100644
--- a/packages/gem/src/elements/base/dialog.ts
+++ b/packages/gem/src/elements/base/dialog.ts
@@ -1,7 +1,9 @@
-import { GemElement, gemSymbols } from '../../lib/element';
-import { attribute, state, connectStore } from '../../lib/decorators';
+import { GemElement } from '../../lib/element';
+import { attribute, state, connectStore, aria } from '../../lib/decorators';
 import { history } from '../../lib/history';
 
+const final = Symbol();
+
 /**
  * 在模版中声明的 dialog，使用 `open` 方法 打开；
  * 模拟 top layer：https://github.com/whatwg/html/issues/4633.
@@ -11,6 +13,7 @@ import { history } from '../../lib/history';
  * @fires close
  */
 @connectStore(history.store)
+@aria({ role: 'dialog', ariaModal: 'true' })
 export abstract class GemDialogBaseElement extends GemElement {
   @attribute label: string;
   @state opened: boolean;
@@ -25,8 +28,6 @@ export abstract class GemDialogBaseElement extends GemElement {
       () => (this.inert = true),
       () => [],
     );
-    this.internals.role = 'dialog';
-    this.internals.ariaModal = 'true';
   }
 
   /**
@@ -69,7 +70,7 @@ export abstract class GemDialogBaseElement extends GemElement {
       close: this.#closeHandle,
       shouldClose: this.shouldClose,
     });
-    return gemSymbols.final;
+    return final;
   };
 
   shouldClose() {
@@ -79,7 +80,7 @@ export abstract class GemDialogBaseElement extends GemElement {
   /**@final */
   close = () => {
     history.back();
-    return gemSymbols.final;
+    return final;
   };
 
   /**
@@ -91,6 +92,6 @@ export abstract class GemDialogBaseElement extends GemElement {
   forceClose = () => {
     this.opened = false;
     setTimeout(this.close, 100);
-    return gemSymbols.final;
+    return final;
   };
 }
diff --git a/packages/gem/src/elements/base/link.ts b/packages/gem/src/elements/base/link.ts
index b5f57e7d..223b84d8 100644
--- a/packages/gem/src/elements/base/link.ts
+++ b/packages/gem/src/elements/base/link.ts
@@ -1,5 +1,5 @@
 import { GemElement, html } from '../../lib/element';
-import { attribute, property, state, part, connectStore } from '../../lib/decorators';
+import { attribute, property, state, part, connectStore, focusable } from '../../lib/decorators';
 import { history, basePathStore } from '../../lib/history';
 import { absoluteLocation } from '../../lib/utils';
 import { ifDefined } from '../../lib/directives';
@@ -25,6 +25,7 @@ function isExternal(path: string) {
  * Bug: print `<link>` https://github.com/mantou132/gem/issues/36
  */
 @connectStore(basePathStore)
+@focusable()
 export class GemLinkElement extends GemElement {
   @attribute href: string;
   @attribute target: string;
@@ -52,7 +53,7 @@ export class GemLinkElement extends GemElement {
   }
 
   constructor() {
-    super({ focusable: true });
+    super();
     this.addEventListener('click', this.#onClick);
   }
 
diff --git a/packages/gem/src/elements/base/modal-factory.ts b/packages/gem/src/elements/base/modal-factory.ts
index 4315f98b..8359fb78 100644
--- a/packages/gem/src/elements/base/modal-factory.ts
+++ b/packages/gem/src/elements/base/modal-factory.ts
@@ -1,4 +1,4 @@
-import { GemElement, gemSymbols } from '../../lib/element';
+import { GemElement } from '../../lib/element';
 import { connect, createStore, updateStore } from '../../lib/store';
 import { history } from '../../lib/history';
 
@@ -13,6 +13,7 @@ const open = Symbol('open mark');
  * 模拟 top layer：https://github.com/whatwg/html/issues/4633.
  */
 export function createModalClass<T extends Record<string, unknown>>(options: T) {
+  const final = Symbol();
   return class extends GemElement {
     static inertStore: HTMLElement[] = [];
     static instance: GemElement | null = null;
@@ -51,7 +52,7 @@ export function createModalClass<T extends Record<string, unknown>>(options: T)
           shouldClose: this.shouldClose.bind(this),
         });
       }, 100);
-      return gemSymbols.final;
+      return final;
     }
 
     /**
@@ -60,7 +61,7 @@ export function createModalClass<T extends Record<string, unknown>>(options: T)
      */
     static close() {
       history.back();
-      return gemSymbols.final;
+      return final;
     }
 
     /**
@@ -71,7 +72,7 @@ export function createModalClass<T extends Record<string, unknown>>(options: T)
       this.inertStore.forEach((e) => (e.inert = false));
       this.instance?.remove();
       updateStore(this.store, { [open]: false, ...options });
-      return gemSymbols.final;
+      return final;
     }
 
     /**
diff --git a/packages/gem/src/elements/base/reflect.ts b/packages/gem/src/elements/base/reflect.ts
index 6679451b..32da1587 100644
--- a/packages/gem/src/elements/base/reflect.ts
+++ b/packages/gem/src/elements/base/reflect.ts
@@ -7,7 +7,7 @@
  * 比如 duoyun-ui 文档站加载示例元素时把 GemReflectElement 渲染的元素清除
  */
 import { GemElement } from '../../lib/element';
-import { attribute, property } from '../../lib/decorators';
+import { attribute, property, shadow } from '../../lib/decorators';
 
 const START = 'gem-reflect-start';
 const END = 'gem-reflect-end';
@@ -28,6 +28,7 @@ const getReflectFragment = (startNode: Comment) => {
 /**
  * @customElement gem-reflect
  */
+@shadow({ mode: null })
 export class GemReflectElement extends GemElement {
   @attribute method: 'prepend' | 'append';
 
@@ -38,7 +39,7 @@ export class GemReflectElement extends GemElement {
   }
 
   constructor() {
-    super({ isLight: true });
+    super();
 
     this.effect(
       () => {
diff --git a/packages/gem/src/elements/base/route.ts b/packages/gem/src/elements/base/route.ts
index 85230a5d..a5b272df 100644
--- a/packages/gem/src/elements/base/route.ts
+++ b/packages/gem/src/elements/base/route.ts
@@ -1,5 +1,5 @@
 import { GemElement, html, TemplateResult } from '../../lib/element';
-import { property, emitter, Emitter, boolattribute } from '../../lib/decorators';
+import { property, emitter, Emitter, boolattribute, shadow } from '../../lib/decorators';
 import { createStore, updateStore, Store, connect } from '../../lib/store';
 import { titleStore, history, UpdateHistoryParams } from '../../lib/history';
 import { addListener, QueryString } from '../../lib/utils';
@@ -139,6 +139,7 @@ const scrollPositionMap = new Map<string, number>();
  * @fires error
  * @fires loading
  */
+@shadow({ mode: null })
 export class GemRouteElement extends GemElement<State> {
   @boolattribute transition: boolean;
   @property routes?: RouteItem[] | RoutesObject;
@@ -201,8 +202,8 @@ export class GemRouteElement extends GemElement<State> {
     return typeof this.scrollContainer === 'function' ? this.scrollContainer() : this.scrollContainer;
   }
 
-  constructor({ isLight, routes }: ConstructorOptions = {}) {
-    super({ isLight });
+  constructor({ routes }: ConstructorOptions = {}) {
+    super();
     this.routes = this.routes || routes;
   }
 
@@ -346,8 +347,5 @@ export class GemRouteElement extends GemElement<State> {
 /**
  * @customElement gem-light-route
  */
-export class GemLightRouteElement extends GemRouteElement {
-  constructor(options: ConstructorOptions = {}) {
-    super({ ...options, isLight: true });
-  }
-}
+@shadow({ mode: null })
+export class GemLightRouteElement extends GemRouteElement {}
diff --git a/packages/gem/src/helper/i18n.ts b/packages/gem/src/helper/i18n.ts
index a390ca9b..7d3069d7 100644
--- a/packages/gem/src/helper/i18n.ts
+++ b/packages/gem/src/helper/i18n.ts
@@ -1,5 +1,5 @@
 import { UpdateHistoryParams } from '../lib/history';
-import { html, TemplateResult, gemSymbols } from '../lib/element';
+import { html, TemplateResult, UpdateToken } from '../lib/element';
 import { GemError } from '../lib/utils';
 import type { RouteTrigger } from '../elements/base/route';
 
@@ -210,7 +210,7 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
     const temp: Element[] = [document.documentElement];
     while (!!temp.length) {
       const element = temp.pop()!;
-      (element as any)[gemSymbols.update]?.();
+      (element as any)[UpdateToken]?.();
       if (element.shadowRoot?.firstElementChild) temp.push(element.shadowRoot.firstElementChild);
       if (element.firstElementChild) temp.push(element.firstElementChild);
       if (element.nextElementSibling) temp.push(element.nextElementSibling);
diff --git a/packages/gem/src/lib/decorators.ts b/packages/gem/src/lib/decorators.ts
index da789599..4ddca511 100644
--- a/packages/gem/src/lib/decorators.ts
+++ b/packages/gem/src/lib/decorators.ts
@@ -1,6 +1,6 @@
 import type { GemReflectElement } from '../elements/reflect';
 
-import { GemElement, gemSymbols } from './element';
+import { GemElement, UpdateToken, Metadata } from './element';
 import { Sheet, camelToKebabCase, randomStr, PropProxyMap } from './utils';
 import { Store } from './store';
 import * as elementExports from './element';
@@ -9,30 +9,35 @@ import * as storeExports from './store';
 import * as versionExports from './version';
 
 type GemElementPrototype = GemElement<any>;
-type GemElementConstructor = typeof GemElement;
+type StaticField = Exclude<keyof Metadata, keyof ShadowRootInit | 'aria' | 'rootElement' | 'noBlocking' | 'focusable'>;
 type StaticFieldMember = string | Store<unknown> | Sheet<unknown>;
 
-const { get, set } = Reflect;
+const { set, deleteProperty, getOwnPropertyDescriptor, defineProperty } = Reflect;
+const { getPrototypeOf } = Object;
 const gemElementProxyMap = new PropProxyMap<GemElement>();
 
-function pushStaticField(target: GemElement | GemElementPrototype, field: symbol, member: StaticFieldMember) {
-  const cls = target.constructor as GemElementConstructor;
-  if (!cls.hasOwnProperty(field)) {
+function pushStaticField(
+  context: ClassFieldDecoratorContext | ClassDecoratorContext,
+  field: StaticField,
+  member: StaticFieldMember,
+) {
+  const metadata = context.metadata as Metadata;
+  if (!getOwnPropertyDescriptor(metadata, field)) {
     // 继承基类
-    const current = new Set<unknown>(get(cls, field));
+    const current = new Set<unknown>(metadata[field]);
     current.delete(member);
-    Object.defineProperty(cls, field, {
+    defineProperty(metadata, field, {
       value: [...current],
     });
   }
 
-  get(cls, field)!.push(member as any);
+  metadata[field]!.push(member as any);
 }
 
 function clearField<T extends GemElement<any>>(instance: T, prop: string) {
-  const desc = Reflect.getOwnPropertyDescriptor(instance, prop)!;
-  Reflect.deleteProperty(instance, prop);
-  Reflect.set(instance, prop, desc.value);
+  const desc = getOwnPropertyDescriptor(instance, prop)!;
+  deleteProperty(instance, prop);
+  set(instance, prop, desc.value);
 }
 
 const getReflectTargets = (ele: ShadowRoot | GemElement) =>
@@ -40,7 +45,7 @@ const getReflectTargets = (ele: ShadowRoot | GemElement) =>
 
 function defineRef(target: GemElement, prop: string, ref: string) {
   const refSelector = `[ref=${ref}]`;
-  Object.defineProperty(target, prop, {
+  defineProperty(target, prop, {
     configurable: true,
     get() {
       const proxy = gemElementProxyMap.get(this);
@@ -96,11 +101,11 @@ export function refobject<T extends GemElement<any>, V extends HTMLElement>(
   context: ClassFieldDecoratorContext<T, RefObject<V>>,
 ) {
   context.addInitializer(function (this: T) {
-    const target = Object.getPrototypeOf(this);
+    const target = getPrototypeOf(this);
     const prop = context.name as string;
     if (!target.hasOwnProperty(prop)) {
       const ref = `${camelToKebabCase(prop)}-${randomStr()}`;
-      pushStaticField(this, gemSymbols.definedRefs, ref);
+      pushStaticField(context, 'definedRefs', ref);
       defineRef(target, prop, ref);
     }
     clearField(this, prop);
@@ -113,17 +118,17 @@ const observedTargetAttributes = new WeakMap<GemElementPrototype, Map<string, st
 // 使用 Gem DevTools 注入脚本监听 attribute 变化
 const { setAttribute, toggleAttribute, removeAttribute } = Element.prototype;
 GemElement.prototype.setAttribute = function (n: string, v: string) {
-  const prop = observedTargetAttributes.get(Object.getPrototypeOf(this))?.get(n);
+  const prop = observedTargetAttributes.get(getPrototypeOf(this))?.get(n);
   if (!prop) return setAttribute.call(this, n, v);
   (this as any)[prop] = v;
 };
 GemElement.prototype.removeAttribute = function (n: string) {
-  const prop = observedTargetAttributes.get(Object.getPrototypeOf(this))?.get(n);
+  const prop = observedTargetAttributes.get(getPrototypeOf(this))?.get(n);
   if (!prop) return removeAttribute.call(this, n);
   (this as any)[prop] = null;
 };
 GemElement.prototype.toggleAttribute = function (n: string, force?: boolean) {
-  const prop = observedTargetAttributes.get(Object.getPrototypeOf(this))?.get(n);
+  const prop = observedTargetAttributes.get(getPrototypeOf(this))?.get(n);
   if (!prop) return toggleAttribute.call(this, n, force);
   return ((this as any)[prop] = force ?? !this.hasAttribute(n));
 };
@@ -132,19 +137,19 @@ function emptyFunction() {
   // 用于占位的空函数
 }
 
-type DefinePropertyOptions = {
+type DefinePropOptions = {
   attr?: string;
   attrType?: (v?: any) => any;
   event?: string;
   eventOptions?: Omit<CustomEventInit<unknown>, 'detail'>;
 };
 const isEventHandleSymbol = Symbol('event handle');
-function defineProperty(
+function defineProp(
   target: GemElementPrototype,
   prop: string,
-  { attr, attrType, event, eventOptions }: DefinePropertyOptions = {},
+  { attr, attrType, event, eventOptions }: DefinePropOptions = {},
 ) {
-  Object.defineProperty(target, prop, {
+  defineProperty(target, prop, {
     configurable: true,
     get() {
       const value = gemElementProxyMap.get(this)[prop];
@@ -174,11 +179,11 @@ function defineProperty(
               that.dispatchEvent(evt);
               v(detail, options);
             };
-        Reflect.set(proxy[prop]!, isEventHandleSymbol, true);
+        set(proxy[prop]!, isEventHandleSymbol, true);
         // emitter 不触发元素更新
       } else {
         proxy[prop] = v;
-        this[gemSymbols.update]();
+        this[UpdateToken]();
       }
     },
   });
@@ -189,10 +194,10 @@ function decoratorAttr<T extends GemElement<any>>(context: ClassFieldDecoratorCo
   const prop = context.name as string;
   const attr = camelToKebabCase(prop);
   context.addInitializer(function (this: T) {
-    const target = Object.getPrototypeOf(this);
+    const target = getPrototypeOf(this);
     if (!target.hasOwnProperty(prop)) {
-      pushStaticField(target, gemSymbols.observedAttributes, attr); // 没有 observe 的效果
-      defineProperty(target, prop, { attr, attrType });
+      pushStaticField(context, 'observedAttributes', attr); // 没有 observe 的效果
+      defineProp(target, prop, { attr, attrType });
       // 记录观察的 attribute
       const attrMap = observedTargetAttributes.get(target) || new Map<string, string>();
       attrMap.set(attr, prop);
@@ -242,10 +247,10 @@ export function numattribute<T extends GemElement<any>>(_: undefined, context: C
 export function property<T extends GemElement<any>>(_: undefined, context: ClassFieldDecoratorContext<T>) {
   const prop = context.name as string;
   context.addInitializer(function (this: T) {
-    const target = Object.getPrototypeOf(this);
+    const target = getPrototypeOf(this);
     if (!target.hasOwnProperty(prop)) {
-      pushStaticField(this, gemSymbols.observedProperties, prop);
-      defineProperty(target, prop);
+      pushStaticField(context, 'observedProperties', prop);
+      defineProp(target, prop);
     }
     clearField(this, prop);
   });
@@ -256,7 +261,7 @@ export function property<T extends GemElement<any>>(_: undefined, context: Class
 }
 
 function defineCSSState(target: GemElementPrototype, prop: string, stateStr: string) {
-  Object.defineProperty(target, prop, {
+  defineProperty(target, prop, {
     configurable: true,
     get() {
       const that = this as GemElement;
@@ -290,11 +295,11 @@ function defineCSSState(target: GemElementPrototype, prop: string, stateStr: str
  */
 export function state<T extends GemElement<any>>(_: undefined, context: ClassFieldDecoratorContext<T, boolean>) {
   context.addInitializer(function (this: T) {
-    const target = Object.getPrototypeOf(this);
+    const target = getPrototypeOf(this);
     const prop = context.name as string;
     if (!target.hasOwnProperty(prop)) {
       const attr = camelToKebabCase(prop);
-      pushStaticField(this, gemSymbols.definedCSSStates, attr);
+      pushStaticField(context, 'definedCSSStates', attr);
       defineCSSState(target, prop, attr);
     }
     clearField(this, prop);
@@ -304,18 +309,18 @@ export function state<T extends GemElement<any>>(_: undefined, context: ClassFie
 function defineStaticField(
   context: ClassFieldDecoratorContext<any, string>,
   target: any,
-  field: symbol,
+  field: StaticField,
   value: string,
 ) {
   const prop = context.name as string;
   const attr = camelToKebabCase(prop);
   if (context.static) {
-    pushStaticField(target.prototype, field, attr);
+    pushStaticField(context, field, attr);
   } else {
-    const proto = Object.getPrototypeOf(target);
+    const proto = getPrototypeOf(target);
     if (!proto[prop]) {
       proto[prop] = attr;
-      pushStaticField(proto, field, attr);
+      pushStaticField(context, field, attr);
     }
     // NOTE: 未清除实例上的字段
   }
@@ -335,7 +340,7 @@ function defineStaticField(
  */
 export function slot(_: undefined, context: ClassFieldDecoratorContext<any, string>) {
   return function (this: any, value: string) {
-    return defineStaticField(context, this, gemSymbols.definedSlots, value);
+    return defineStaticField(context, this, 'definedSlots', value);
   };
 }
 
@@ -352,7 +357,7 @@ export function slot(_: undefined, context: ClassFieldDecoratorContext<any, stri
  */
 export function part(_: undefined, context: ClassFieldDecoratorContext<any, string>) {
   return function (this: any, value: string) {
-    return defineStaticField(context, this, gemSymbols.definedParts, value);
+    return defineStaticField(context, this, 'definedParts', value);
   };
 }
 
@@ -371,7 +376,7 @@ export type Emitter<T = any> = (detail?: T, options?: Omit<CustomEventInit<unkno
  */
 export function emitter<T extends GemElement<any>>(_: undefined, context: ClassFieldDecoratorContext<T, Emitter>) {
   context.addInitializer(function (this: T) {
-    defineEmitter(this, context.name as string);
+    defineEmitter(context, this, context.name as string);
   });
 }
 export function globalemitter<T extends GemElement<any>>(
@@ -379,15 +384,20 @@ export function globalemitter<T extends GemElement<any>>(
   context: ClassFieldDecoratorContext<T, Emitter>,
 ) {
   context.addInitializer(function (this: T) {
-    defineEmitter(this, context.name as string, { bubbles: true, composed: true });
+    defineEmitter(context, this, context.name as string, { bubbles: true, composed: true });
   });
 }
-function defineEmitter(t: GemElement, prop: string, eventOptions?: Omit<CustomEventInit<unknown>, 'detail'>) {
-  const target = Object.getPrototypeOf(t);
+function defineEmitter(
+  context: ClassFieldDecoratorContext,
+  t: GemElement,
+  prop: string,
+  eventOptions?: Omit<CustomEventInit<unknown>, 'detail'>,
+) {
+  const target = getPrototypeOf(t);
   if (!target.hasOwnProperty(prop)) {
     const event = camelToKebabCase(prop);
-    pushStaticField(target, gemSymbols.definedEvents, event);
-    defineProperty(target, prop, { event, eventOptions });
+    pushStaticField(context, 'definedEvents', event);
+    defineProp(target, prop, { event, eventOptions });
   }
   clearField(t, prop);
 }
@@ -402,9 +412,8 @@ function defineEmitter(t: GemElement, prop: string, eventOptions?: Omit<CustomEv
  * ```
  */
 export function adoptedStyle(style: Sheet<unknown>) {
-  return function (cls: unknown, _: ClassDecoratorContext) {
-    const con = cls as GemElementConstructor;
-    pushStaticField(con.prototype, gemSymbols.adoptedStyleSheets, style);
+  return function (_: unknown, context: ClassDecoratorContext) {
+    pushStaticField(context, 'adoptedStyleSheets', style);
   };
 }
 
@@ -418,9 +427,8 @@ export function adoptedStyle(style: Sheet<unknown>) {
  * ```
  */
 export function connectStore(store: Store<unknown>) {
-  return function (cls: unknown, _: ClassDecoratorContext) {
-    const con = cls as GemElementConstructor;
-    pushStaticField(con.prototype, gemSymbols.observedStores, store);
+  return function (_: unknown, context: ClassDecoratorContext) {
+    pushStaticField(context, 'observedStores', store);
   };
 }
 
@@ -434,8 +442,42 @@ export function connectStore(store: Store<unknown>) {
  * ```
  */
 export function rootElement(rootType: string) {
-  return function (cls: any, _: ClassDecoratorContext) {
-    set(cls, gemSymbols.rootElement, rootType);
+  return function (_: any, context: ClassDecoratorContext) {
+    const metadata = context.metadata as Metadata;
+    metadata.rootElement = rootType;
+  };
+}
+
+export function shadow({
+  mode = 'open',
+  serializable = true,
+  delegatesFocus = true,
+  slotAssignment,
+}: Partial<Omit<ShadowRootInit, 'mode'> & { mode?: null | ShadowRootMode }> = {}) {
+  return function (_: any, context: ClassDecoratorContext) {
+    const metadata = context.metadata as Metadata;
+    Object.assign(metadata, { mode, serializable, delegatesFocus, slotAssignment });
+  };
+}
+
+export function async() {
+  return function (_: any, context: ClassDecoratorContext) {
+    const metadata = context.metadata as Metadata;
+    metadata.noBlocking = true;
+  };
+}
+
+export function focusable() {
+  return function (_: any, context: ClassDecoratorContext) {
+    const metadata = context.metadata as Metadata;
+    metadata.focusable = true;
+  };
+}
+
+export function aria(info: Partial<ARIAMixin>) {
+  return function (_: any, context: ClassDecoratorContext) {
+    const metadata = context.metadata as Metadata;
+    metadata.aria = { ...metadata.aria, ...info };
   };
 }
 
diff --git a/packages/gem/src/lib/element.ts b/packages/gem/src/lib/element.ts
index d23c1851..df14f473 100644
--- a/packages/gem/src/lib/element.ts
+++ b/packages/gem/src/lib/element.ts
@@ -17,10 +17,6 @@ export { html, svg, render, directive, TemplateResult, SVGTemplateResult } from
 const { get } = Reflect;
 
 declare global {
-  interface ElementInternals extends ARIAMixin {
-    // https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet
-    states: Set<string>;
-  }
   // 用于 css 选择器选择元素，使用 @refobject 自动选择获取
   // 必须使用 attr 赋值
   /**
@@ -29,28 +25,29 @@ declare global {
   interface HTMLElement {
     ref: string;
   }
-  // https://dom.spec.whatwg.org/#shadowroot-clonable
-  interface ShadowRootInit {
-    clonable?: boolean;
-    serializable?: boolean;
+  interface SymbolConstructor {
+    metadata: symbol;
   }
 }
 
+// https://github.com/tc39/proposal-decorator-metadata
+Symbol.metadata = Symbol.for('Symbol.metadata');
+
 function execCallback(fun: any) {
   typeof fun === 'function' && fun();
 }
 
 // global render task pool
-const asyncRenderTaskList = new LinkedList<() => void>();
+const noBlockingTaskList = new LinkedList<() => void>();
 const tick = (timeStamp = performance.now()) => {
   if (performance.now() > timeStamp + 16) return requestAnimationFrame(tick);
-  const task = asyncRenderTaskList.get();
+  const task = noBlockingTaskList.get();
   if (task) {
     task();
     tick(timeStamp);
   }
 };
-asyncRenderTaskList.addEventListener('start', () => addMicrotask(tick));
+noBlockingTaskList.addEventListener('start', () => addMicrotask(tick));
 
 type GetDepFun<T> = () => T;
 type EffectCallback<T> = (depValues: T, oldDepValues?: T) => any;
@@ -63,34 +60,35 @@ type EffectItem<T> = {
   preCallback?: () => void;
 };
 
-export const gemSymbols = {
-  // 禁止覆盖自定义元素原生生命周期方法
-  // https://github.com/microsoft/TypeScript/issues/21388#issuecomment-934345226
-  final: Symbol(),
-  update: Symbol(),
+// proto prop
+export const UpdateToken = Symbol.for('gem@update');
+// fix modal-factory type error
+const updateTokenAlias = UpdateToken;
+
+export type Metadata = Partial<ShadowRootInit> & {
+  noBlocking?: boolean;
+  focusable?: boolean;
+  aria?: Partial<ARIAMixin>;
   // 指定 root 元素类型
-  rootElement: Symbol(),
+  rootElement?: string;
   // 实例化时使用到，DevTools 需要读取
-  observedStores: Symbol.for('gem@observedStores'),
-  adoptedStyleSheets: Symbol.for('gem@adoptedStyleSheets'),
-  sheetToken: SheetToken,
+  observedStores: Store<unknown>[];
+  adoptedStyleSheets?: Sheet<unknown>[];
   // 以下静态字段仅供外部读取，没有实际作用
-  observedProperties: Symbol(),
-  observedAttributes: Symbol(), // 必须在定义元素前指定
-  definedEvents: Symbol(),
-  definedCSSStates: Symbol(),
-  definedRefs: Symbol(),
-  definedParts: Symbol(),
-  definedSlots: Symbol(),
+  observedProperties?: string[];
+  observedAttributes?: string[];
+  definedEvents?: string[];
+  definedCSSStates?: string[];
+  definedRefs?: string[];
+  definedParts?: string[];
+  definedSlots?: string[];
 };
 
-export interface GemElementOptions extends Partial<ShadowRootInit> {
-  isLight?: boolean;
-  isAsync?: boolean;
-  focusable?: boolean;
-}
-
 export abstract class GemElement<T = Record<string, unknown>> extends HTMLElement {
+  // 禁止覆盖自定义元素原生生命周期方法
+  // https://github.com/microsoft/TypeScript/issues/21388#issuecomment-934345226
+  static #final = Symbol();
+
   // 定义当前元素的状态，和 attr/prop 的本质区别是不为外部输入
   readonly state?: T;
 
@@ -100,29 +98,30 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
   // 和 isConnected 有区别
   #isMounted?: boolean;
   #isConnected?: boolean;
-  #isAsync?: boolean;
   #effectList?: EffectItem<any>[];
   #memoList?: EffectItem<any>[];
   #unmountCallback?: any;
 
-  [gemSymbols.update]() {
+  [updateTokenAlias]() {
     if (this.#isMounted) {
       addMicrotask(this.#update);
     }
   }
 
-  constructor(options: GemElementOptions = {}) {
+  constructor() {
     super();
 
-    this.#isAsync = options.isAsync;
-    this.#renderRoot = options.isLight
-      ? this
-      : this.attachShadow({
-          mode: options.mode || 'open',
-          serializable: options.serializable ?? true,
-          delegatesFocus: options.delegatesFocus,
-          slotAssignment: options.slotAssignment,
-        });
+    const {
+      mode = 'open',
+      serializable,
+      delegatesFocus,
+      slotAssignment,
+      focusable,
+      adoptedStyleSheets,
+      aria,
+    } = this.#metadata;
+
+    this.#renderRoot = !mode ? this : this.attachShadow({ mode, serializable, delegatesFocus, slotAssignment });
 
     // https://stackoverflow.com/questions/43836886/failed-to-construct-customelement-error-when-javascript-file-is-placed-in-head
     // focusable 元素一般同时具备 disabled 属性
@@ -134,11 +133,11 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
         this.internals.ariaDisabled = String(disabled);
 
-        if (options.focusable && !hasInitTabIndex) {
+        if (focusable && !hasInitTabIndex) {
           this.tabIndex = -Number(disabled);
         }
 
-        if ((options.focusable || options.delegatesFocus) && disabled) {
+        if ((focusable || delegatesFocus) && disabled) {
           return addListener(this, 'click', (e: Event) => e.isTrusted && e.stopImmediatePropagation(), {
             capture: true,
           });
@@ -147,7 +146,8 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
       () => [get(this, 'disabled')],
     );
 
-    const adoptedStyleSheets = get(new.target, gemSymbols.adoptedStyleSheets) as Sheet<unknown>[] | undefined;
+    Object.assign(this.internals, aria);
+
     if (adoptedStyleSheets) {
       const sheets = adoptedStyleSheets.map((item) => item[SheetToken] || item);
       if (this.shadowRoot) {
@@ -167,6 +167,11 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     }
   }
 
+  get #metadata(): Metadata {
+    // BUG? 为啥会是空
+    return (this.constructor as any)[Symbol.metadata] || {};
+  }
+
   get internals() {
     if (!this.#internals) {
       this.#internals = this.attachInternals();
@@ -322,8 +327,8 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
   };
 
   #update = () => {
-    if (this.#isAsync) {
-      asyncRenderTaskList.add(this.#updateCallback);
+    if (this.#metadata.noBlocking) {
+      noBlockingTaskList.add(this.#updateCallback);
     } else {
       this.#updateCallback();
     }
@@ -357,8 +362,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
       return;
     }
 
-    const observedStores = get(this.constructor, gemSymbols.observedStores) as Store<unknown>[] | undefined;
-    const rootElement = get(this.constructor, gemSymbols.rootElement) as string | undefined;
+    const { observedStores, rootElement } = this.#metadata;
 
     this.#isConnected = true;
     this.willMount?.();
@@ -378,12 +382,12 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
    * use `mounted`
    */
   connectedCallback() {
-    if (this.#isAsync) {
-      asyncRenderTaskList.add(this.#connectedCallback);
+    if (this.#metadata.noBlocking) {
+      noBlockingTaskList.add(this.#connectedCallback);
     } else {
       this.#connectedCallback();
     }
-    return gemSymbols.final;
+    return GemElement.#final;
   }
 
   /**
@@ -391,7 +395,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
    * @final
    */
   adoptedCallback() {
-    return gemSymbols.final;
+    return GemElement.#final;
   }
 
   /**
@@ -404,15 +408,15 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
       this.#isAppendReason = true;
       return;
     }
-    asyncRenderTaskList.delete(this.#connectedCallback);
-    asyncRenderTaskList.delete(this.#updateCallback);
+    noBlockingTaskList.delete(this.#connectedCallback);
+    noBlockingTaskList.delete(this.#updateCallback);
     this.#isMounted = false;
     this.#disconnectStore?.forEach((disconnect) => disconnect());
     execCallback(this.#unmountCallback);
     this.unmounted?.();
     this.#effectList = this.#clearEffect(this.#effectList);
     this.#memoList = this.#clearEffect(this.#memoList);
-    return gemSymbols.final;
+    return GemElement.#final;
   }
 
   #clearEffect = (list?: EffectItem<any>[]) => {
diff --git a/packages/gem/src/lib/utils.ts b/packages/gem/src/lib/utils.ts
index c6672fe1..8f3be230 100644
--- a/packages/gem/src/lib/utils.ts
+++ b/packages/gem/src/lib/utils.ts
@@ -240,7 +240,6 @@ export function css(arr: TemplateStringsArray, ...args: any[]) {
 }
 
 // 跨多个 gem 工作
-// TODO: move to `gemSymbols`
 export const SheetToken = Symbol.for('gem@sheetToken');
 
 export type Sheet<T> = {
diff --git a/packages/gem/src/test/gem-element/advance.test.ts b/packages/gem/src/test/gem-element/advance.test.ts
index ce85b080..ff391820 100644
--- a/packages/gem/src/test/gem-element/advance.test.ts
+++ b/packages/gem/src/test/gem-element/advance.test.ts
@@ -8,7 +8,7 @@
  */
 import { fixture, expect, nextFrame } from '@open-wc/testing';
 
-import { GemElement, gemSymbols, html } from '../../lib/element';
+import { GemElement, html, Metadata } from '../../lib/element';
 import { createStore, updateStore } from '../../lib/store';
 import {
   attribute,
@@ -19,6 +19,8 @@ import {
   refobject,
   RefObject,
   connectStore,
+  async,
+  shadow,
 } from '../../lib/decorators';
 import { createCSSSheet, css } from '../../lib/utils';
 
@@ -27,10 +29,8 @@ const store = createStore({
 });
 
 @connectStore(store)
+@async()
 class AsyncGemDemo extends GemElement {
-  constructor() {
-    super({ isAsync: true });
-  }
   state = { a: 0 };
   renderCount = 0;
   render() {
@@ -61,10 +61,8 @@ const lightStyle = createCSSSheet(css`
 
 @customElement('light-gem-demo')
 @adoptedStyle(lightStyle)
+@shadow({ mode: null })
 class LightGemDemo extends GemElement {
-  constructor() {
-    super({ isLight: true });
-  }
   render() {
     return html`<div>hi</div>`;
   }
@@ -306,7 +304,8 @@ describe('gem element 继承', () => {
   it('静态字段继承', async () => {
     new I();
     new InheritGem(); // 触发装饰器自定义初始化函数
-    expect(Reflect.get(InheritGem, gemSymbols.observedAttributes)).to.eql(['app-title', 'app-title2']);
+    const metadata: Metadata = Reflect.get(InheritGem, Symbol.metadata);
+    expect(metadata.observedAttributes).to.eql(['app-title', 'app-title2']);
   });
   it('attr/prop/emitter 继承', async () => {
     const name = window.name;
diff --git a/packages/gem/src/test/gem-element/decorators.test.ts b/packages/gem/src/test/gem-element/decorators.test.ts
index b5091395..3442b9ed 100644
--- a/packages/gem/src/test/gem-element/decorators.test.ts
+++ b/packages/gem/src/test/gem-element/decorators.test.ts
@@ -1,6 +1,6 @@
 import { fixture, expect } from '@open-wc/testing';
 
-import { GemElement, gemSymbols, html } from '../../lib/element';
+import { GemElement, html, Metadata } from '../../lib/element';
 import { createStore, updateStore } from '../../lib/store';
 import { createCSSSheet, css } from '../../lib/utils';
 import {
@@ -82,18 +82,15 @@ describe('装饰器', () => {
     `);
     updateStore(store, { a: 1 });
     await Promise.resolve();
-    expect(Reflect.get(DecoratorGemElement, gemSymbols.observedStores)).to.eql([{ a: 1 }]);
-    expect(Reflect.get(DecoratorGemElement, gemSymbols.observedAttributes)).to.eql([
-      'rank-attr',
-      'rank-disabled',
-      'rank-count',
-    ]);
-    expect(Reflect.get(DecoratorGemElement, gemSymbols.definedEvents)).to.eql(['say-hi']);
-    expect(Reflect.get(DecoratorGemElement, gemSymbols.definedCSSStates)).to.eql(['open-state']);
-    expect(Reflect.get(DecoratorGemElement, gemSymbols.definedParts)).to.eql(['say-hi', 'header-part']);
-    expect(Reflect.get(DecoratorGemElement, gemSymbols.definedSlots)).to.eql(['rank-attr', 'body-slot']);
-    expect(Reflect.get(DecoratorGemElement, gemSymbols.definedRefs)?.[0].startsWith('input-ref-')).to.equal(true);
-    expect(Reflect.get(DecoratorGemElement, gemSymbols.observedProperties)).to.eql(['propData']);
+    const metadata: Metadata = Reflect.get(DecoratorGemElement, Symbol.metadata);
+    expect(metadata.observedStores).to.eql([{ a: 1 }]);
+    expect(metadata.observedAttributes).to.eql(['rank-attr', 'rank-disabled', 'rank-count']);
+    expect(metadata.definedEvents).to.eql(['say-hi']);
+    expect(metadata.definedCSSStates).to.eql(['open-state']);
+    expect(metadata.definedParts).to.eql(['say-hi', 'header-part']);
+    expect(metadata.definedSlots).to.eql(['rank-attr', 'body-slot']);
+    expect(metadata.definedRefs?.[0].startsWith('input-ref-')).to.equal(true);
+    expect(metadata.observedProperties).to.eql(['propData']);
     expect(DecoratorGemElement.sayHi).to.equal('say-hi');
     expect(DecoratorGemElement.rankAttr).to.equal('rank-attr');
     expect(el.rankAttr).to.equal('attr');
diff --git a/yarn.lock b/yarn.lock
index fca11937..e36a3d18 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1018,120 +1018,125 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@esbuild/aix-ppc64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.2.tgz#7ccd2a552dc4eb740f094a46d18a1b1508b8d37c"
-  integrity sha512-/c7hocx0pm14bHQlqUVKmxwdT/e5/KkyoY1W8F9lk/8CkE037STDDz8PXUP/LE6faj2HqchvDs9GcShxFhI78Q==
-
-"@esbuild/android-arm64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.21.2.tgz#016abbee9f0c6f646b0c6b43b172a5053fe53aab"
-  integrity sha512-SGZKngoTWVUriO5bDjI4WDGsNx2VKZoXcds+ita/kVYB+8IkSCKDRDaK+5yu0b5S0eq6B3S7fpiEvpsa2ammlQ==
-
-"@esbuild/android-arm@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.21.2.tgz#99f3a3c90bf8ac37d1881af6b87d404a02007164"
-  integrity sha512-G1ve3b4FeyJeyCjB4MX1CiWyTaIJwT9wAYE+8+IRA53YoN/reC/Bf2GDRXAzDTnh69Fpl+1uIKg76DiB3U6vwQ==
-
-"@esbuild/android-x64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.21.2.tgz#5039e8d0b2ed03ca75d77e581ead591b1d87826f"
-  integrity sha512-1wzzNoj2QtNkAYwIcWJ66UTRA80+RTQ/kuPMtEuP0X6dp5Ar23Dn566q3aV61h4EYrrgGlOgl/HdcqN/2S/2vg==
-
-"@esbuild/darwin-arm64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.21.2.tgz#6f55b81878d2295d7d4ecdbbb5ee418d379fb49a"
-  integrity sha512-ZyMkPWc5eTROcLOA10lEqdDSTc6ds6nuh3DeHgKip/XJrYjZDfnkCVSty8svWdy+SC1f77ULtVeIqymTzaB6/Q==
-
-"@esbuild/darwin-x64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.21.2.tgz#f295d838c60e0e068c7a91e7784674c6b06c358e"
-  integrity sha512-K4ZdVq1zP9v51h/cKVna7im7G0zGTKKB6bP2yJiSmHjjOykbd8DdhrSi8V978sF69rkwrn8zCyL2t6I3ei6j9A==
-
-"@esbuild/freebsd-arm64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.2.tgz#f665703471824e67ff5f62e6c9ed298f3c363b1b"
-  integrity sha512-4kbOGdpA61CXqadD+Gb/Pw3YXamQGiz9mal/h93rFVSjr5cgMnmJd/gbfPRm+3BMifvnaOfS1gNWaIDxkE2A3A==
-
-"@esbuild/freebsd-x64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.21.2.tgz#6493aa56760521125badd41f78369f18c49e367e"
-  integrity sha512-ShS+R09nuHzDBfPeMUliKZX27Wrmr8UFp93aFf/S8p+++x5BZ+D344CLKXxmY6qzgTL3mILSImPCNJOzD6+RRg==
-
-"@esbuild/linux-arm64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.21.2.tgz#beb96b83bfe32630d34eedc09b8e0722819f1a5b"
-  integrity sha512-Hdu8BL+AmO+eCDvvT6kz/fPQhvuHL8YK4ExKZfANWsNe1kFGOHw7VJvS/FKSLFqheXmB3rTF3xFQIgUWPYsGnA==
-
-"@esbuild/linux-arm@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.21.2.tgz#b1c5176479397b34c36334218063e223b4e588dd"
-  integrity sha512-nnGXjOAv+7cM3LYRx4tJsYdgy8dGDGkAzF06oIDGppWbUkUKN9SmgQA8H0KukpU0Pjrj9XmgbWqMVSX/U7eeTA==
-
-"@esbuild/linux-ia32@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.21.2.tgz#8ce387793eccdc28f5964e19f4dcbdb901099be4"
-  integrity sha512-m73BOCW2V9lcj7RtEMi+gBfHC6n3+VHpwQXP5offtQMPLDkpVolYn1YGXxOZ9hp4h3UPRKuezL7WkBsw+3EB3Q==
-
-"@esbuild/linux-loong64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.21.2.tgz#c7360523a8e5e04e0b76b6e9a89a91ba573ac613"
-  integrity sha512-84eYHwwWHq3myIY/6ikALMcnwkf6Qo7NIq++xH0x+cJuUNpdwh8mlpUtRY+JiGUc60yu7ElWBbVHGWTABTclGw==
-
-"@esbuild/linux-mips64el@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.21.2.tgz#0adac2cc3451c25817b0c93bf160cd19008ed03a"
-  integrity sha512-9siSZngT0/ZKG+AH+/agwKF29LdCxw4ODi/PiE0F52B2rtLozlDP92umf8G2GPoVV611LN4pZ+nSTckebOscUA==
-
-"@esbuild/linux-ppc64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.21.2.tgz#d9e79563999288d367eeba2b8194874bef0e8a35"
-  integrity sha512-y0T4aV2CA+ic04ULya1A/8M2RDpDSK2ckgTj6jzHKFJvCq0jQg8afQQIn4EM0G8u2neyOiNHgSF9YKPfuqKOVw==
-
-"@esbuild/linux-riscv64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.21.2.tgz#34227910d843b399447a48180381425529eae7d6"
-  integrity sha512-x5ssCdXmZC86L2Li1qQPF/VaC4VP20u/Zm8jlAu9IiVOVi79YsSz6cpPDYZl1rfKSHYCJW9XBfFCo66S5gVPSA==
-
-"@esbuild/linux-s390x@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.21.2.tgz#2835f5b9b4c961baf6d6f03a870ab2d5bc3fbfcc"
-  integrity sha512-NP7fTpGSFWdXyvp8iAFU04uFh9ARoplFVM/m+8lTRpaYG+2ytHPZWyscSsMM6cvObSIK2KoPHXiZD4l99WaxbQ==
-
-"@esbuild/linux-x64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.21.2.tgz#756282185a936e752a3a80b227a950813fe62ee7"
-  integrity sha512-giZ/uOxWDKda44ZuyfKbykeXznfuVNkTgXOUOPJIjbayJV6FRpQ4zxUy9JMBPLaK9IJcdWtaoeQrYBMh3Rr4vQ==
-
-"@esbuild/netbsd-x64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.2.tgz#e1dde3694f5f8fbf2f7696d021c026e601579167"
-  integrity sha512-IeFMfGFSQfIj1d4XU+6lkbFzMR+mFELUUVYrZ+jvWzG4NGvs6o53ReEHLHpYkjRbdEjJy2W3lTekTxrFHW7YJg==
-
-"@esbuild/openbsd-x64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.2.tgz#b0a8c1ce0077a5b24c5e4cf1c4417128ae5b6489"
-  integrity sha512-48QhWD6WxcebNNaE4FCwgvQVUnAycuTd+BdvA/oZu+/MmbpU8pY2dMEYlYzj5uNHWIG5jvdDmFXu0naQeOWUoA==
-
-"@esbuild/sunos-x64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.21.2.tgz#fc7dd917ffcb2ebab4f22728a23ece3dd36c2979"
-  integrity sha512-90r3nTBLgdIgD4FCVV9+cR6Hq2Dzs319icVsln+NTmTVwffWcCqXGml8rAoocHuJ85kZK36DCteii96ba/PX8g==
-
-"@esbuild/win32-arm64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.21.2.tgz#251e4cdafae688d54a43ac8544cb8c71e8fcdf15"
-  integrity sha512-sNndlsBT8OeE/MZDSGpRDJlWuhjuUz/dn80nH0EP4ZzDUYvMDVa7G87DVpweBrn4xdJYyXS/y4CQNrf7R2ODXg==
-
-"@esbuild/win32-ia32@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.21.2.tgz#1e3a818791b7e93ed353901c83d7cdc901ffcc8a"
-  integrity sha512-Ti2QChGNFzWhUNNVuU4w21YkYTErsNh3h+CzvlEhzgRbwsJ7TrWQqRzW3bllLKKvTppuF3DJ3XP1GEg11AfrEQ==
-
-"@esbuild/win32-x64@0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.21.2.tgz#825b4e7c89b7e7ec64c450ed494a8af7e405a84d"
-  integrity sha512-VEfTCZicoZnZ6sGkjFPGRFFJuL2fZn2bLhsekZl1CJslflp2cJS/VoKs1jMk+3pDfsGW6CfQVUckP707HwbXeQ==
+"@esbuild/aix-ppc64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.23.0.tgz#145b74d5e4a5223489cabdc238d8dad902df5259"
+  integrity sha512-3sG8Zwa5fMcA9bgqB8AfWPQ+HFke6uD3h1s3RIwUNK8EG7a4buxvuFTs3j1IMs2NXAk9F30C/FF4vxRgQCcmoQ==
+
+"@esbuild/android-arm64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.23.0.tgz#453bbe079fc8d364d4c5545069e8260228559832"
+  integrity sha512-EuHFUYkAVfU4qBdyivULuu03FhJO4IJN9PGuABGrFy4vUuzk91P2d+npxHcFdpUnfYKy0PuV+n6bKIpHOB3prQ==
+
+"@esbuild/android-arm@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.23.0.tgz#26c806853aa4a4f7e683e519cd9d68e201ebcf99"
+  integrity sha512-+KuOHTKKyIKgEEqKbGTK8W7mPp+hKinbMBeEnNzjJGyFcWsfrXjSTNluJHCY1RqhxFurdD8uNXQDei7qDlR6+g==
+
+"@esbuild/android-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.23.0.tgz#1e51af9a6ac1f7143769f7ee58df5b274ed202e6"
+  integrity sha512-WRrmKidLoKDl56LsbBMhzTTBxrsVwTKdNbKDalbEZr0tcsBgCLbEtoNthOW6PX942YiYq8HzEnb4yWQMLQuipQ==
+
+"@esbuild/darwin-arm64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.23.0.tgz#d996187a606c9534173ebd78c58098a44dd7ef9e"
+  integrity sha512-YLntie/IdS31H54Ogdn+v50NuoWF5BDkEUFpiOChVa9UnKpftgwzZRrI4J132ETIi+D8n6xh9IviFV3eXdxfow==
+
+"@esbuild/darwin-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.23.0.tgz#30c8f28a7ef4e32fe46501434ebe6b0912e9e86c"
+  integrity sha512-IMQ6eme4AfznElesHUPDZ+teuGwoRmVuuixu7sv92ZkdQcPbsNHzutd+rAfaBKo8YK3IrBEi9SLLKWJdEvJniQ==
+
+"@esbuild/freebsd-arm64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.0.tgz#30f4fcec8167c08a6e8af9fc14b66152232e7fb4"
+  integrity sha512-0muYWCng5vqaxobq6LB3YNtevDFSAZGlgtLoAc81PjUfiFz36n4KMpwhtAd4he8ToSI3TGyuhyx5xmiWNYZFyw==
+
+"@esbuild/freebsd-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.23.0.tgz#1003a6668fe1f5d4439e6813e5b09a92981bc79d"
+  integrity sha512-XKDVu8IsD0/q3foBzsXGt/KjD/yTKBCIwOHE1XwiXmrRwrX6Hbnd5Eqn/WvDekddK21tfszBSrE/WMaZh+1buQ==
+
+"@esbuild/linux-arm64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.23.0.tgz#3b9a56abfb1410bb6c9138790f062587df3e6e3a"
+  integrity sha512-j1t5iG8jE7BhonbsEg5d9qOYcVZv/Rv6tghaXM/Ug9xahM0nX/H2gfu6X6z11QRTMT6+aywOMA8TDkhPo8aCGw==
+
+"@esbuild/linux-arm@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.23.0.tgz#237a8548e3da2c48cd79ae339a588f03d1889aad"
+  integrity sha512-SEELSTEtOFu5LPykzA395Mc+54RMg1EUgXP+iw2SJ72+ooMwVsgfuwXo5Fn0wXNgWZsTVHwY2cg4Vi/bOD88qw==
+
+"@esbuild/linux-ia32@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.23.0.tgz#4269cd19cb2de5de03a7ccfc8855dde3d284a238"
+  integrity sha512-P7O5Tkh2NbgIm2R6x1zGJJsnacDzTFcRWZyTTMgFdVit6E98LTxO+v8LCCLWRvPrjdzXHx9FEOA8oAZPyApWUA==
+
+"@esbuild/linux-loong64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.23.0.tgz#82b568f5658a52580827cc891cb69d2cb4f86280"
+  integrity sha512-InQwepswq6urikQiIC/kkx412fqUZudBO4SYKu0N+tGhXRWUqAx+Q+341tFV6QdBifpjYgUndV1hhMq3WeJi7A==
+
+"@esbuild/linux-mips64el@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.23.0.tgz#9a57386c926262ae9861c929a6023ed9d43f73e5"
+  integrity sha512-J9rflLtqdYrxHv2FqXE2i1ELgNjT+JFURt/uDMoPQLcjWQA5wDKgQA4t/dTqGa88ZVECKaD0TctwsUfHbVoi4w==
+
+"@esbuild/linux-ppc64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.23.0.tgz#f3a79fd636ba0c82285d227eb20ed8e31b4444f6"
+  integrity sha512-cShCXtEOVc5GxU0fM+dsFD10qZ5UpcQ8AM22bYj0u/yaAykWnqXJDpd77ublcX6vdDsWLuweeuSNZk4yUxZwtw==
+
+"@esbuild/linux-riscv64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.23.0.tgz#f9d2ef8356ce6ce140f76029680558126b74c780"
+  integrity sha512-HEtaN7Y5UB4tZPeQmgz/UhzoEyYftbMXrBCUjINGjh3uil+rB/QzzpMshz3cNUxqXN7Vr93zzVtpIDL99t9aRw==
+
+"@esbuild/linux-s390x@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.23.0.tgz#45390f12e802201f38a0229e216a6aed4351dfe8"
+  integrity sha512-WDi3+NVAuyjg/Wxi+o5KPqRbZY0QhI9TjrEEm+8dmpY9Xir8+HE/HNx2JoLckhKbFopW0RdO2D72w8trZOV+Wg==
+
+"@esbuild/linux-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.23.0.tgz#c8409761996e3f6db29abcf9b05bee8d7d80e910"
+  integrity sha512-a3pMQhUEJkITgAw6e0bWA+F+vFtCciMjW/LPtoj99MhVt+Mfb6bbL9hu2wmTZgNd994qTAEw+U/r6k3qHWWaOQ==
+
+"@esbuild/netbsd-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.23.0.tgz#ba70db0114380d5f6cfb9003f1d378ce989cd65c"
+  integrity sha512-cRK+YDem7lFTs2Q5nEv/HHc4LnrfBCbH5+JHu6wm2eP+d8OZNoSMYgPZJq78vqQ9g+9+nMuIsAO7skzphRXHyw==
+
+"@esbuild/openbsd-arm64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.0.tgz#72fc55f0b189f7a882e3cf23f332370d69dfd5db"
+  integrity sha512-suXjq53gERueVWu0OKxzWqk7NxiUWSUlrxoZK7usiF50C6ipColGR5qie2496iKGYNLhDZkPxBI3erbnYkU0rQ==
+
+"@esbuild/openbsd-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.23.0.tgz#b6ae7a0911c18fe30da3db1d6d17a497a550e5d8"
+  integrity sha512-6p3nHpby0DM/v15IFKMjAaayFhqnXV52aEmv1whZHX56pdkK+MEaLoQWj+H42ssFarP1PcomVhbsR4pkz09qBg==
+
+"@esbuild/sunos-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.23.0.tgz#58f0d5e55b9b21a086bfafaa29f62a3eb3470ad8"
+  integrity sha512-BFelBGfrBwk6LVrmFzCq1u1dZbG4zy/Kp93w2+y83Q5UGYF1d8sCzeLI9NXjKyujjBBniQa8R8PzLFAUrSM9OA==
+
+"@esbuild/win32-arm64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.23.0.tgz#b858b2432edfad62e945d5c7c9e5ddd0f528ca6d"
+  integrity sha512-lY6AC8p4Cnb7xYHuIxQ6iYPe6MfO2CC43XXKo9nBXDb35krYt7KGhQnOkRGar5psxYkircpCqfbNDB4uJbS2jQ==
+
+"@esbuild/win32-ia32@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.23.0.tgz#167ef6ca22a476c6c0c014a58b4f43ae4b80dec7"
+  integrity sha512-7L1bHlOTcO4ByvI7OXVI5pNN6HSu6pUQq9yodga8izeuB1KcT2UkHaH6118QJwopExPn0rMHIseCTx1CRo/uNA==
+
+"@esbuild/win32-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.23.0.tgz#db44a6a08520b5f25bbe409f34a59f2d4bcc7ced"
+  integrity sha512-Arm+WgUFLUATuoxCJcahGuk6Yj9Pzxd6l11Zb/2aAuv5kWWvvfhLFo2fni4uSK5vzlUdCGZ/BdV5tH8klj8p8g==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
@@ -5565,34 +5570,35 @@ es6-promisify@7.0.0:
   resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-7.0.0.tgz#9a710008dd6a4ab75a89e280bad787bfb749927b"
   integrity sha512-ginqzK3J90Rd4/Yz7qRrqUeIpe3TwSXTPPZtPne7tGBPeAaQiU8qt4fpKApnxHcq1AwtUdHVg5P77x/yrggG8Q==
 
-esbuild@^0.19.11, esbuild@^0.20.1, esbuild@^0.21.2:
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.2.tgz#6a58b5aa6347eb9e96d060a44e7adaee21bc76c1"
-  integrity sha512-LmHPAa5h4tSxz+g/D8IHY6wCjtIiFx8I7/Q0Aq+NmvtoYvyMnJU0KQJcqB6QH30X9x/W4CemgUtPgQDZFca5SA==
+esbuild@^0.19.11, esbuild@^0.20.1, esbuild@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.23.0.tgz#de06002d48424d9fdb7eb52dbe8e95927f852599"
+  integrity sha512-1lvV17H2bMYda/WaFb2jLPeHU3zml2k4/yagNMG8Q/YtfMjCwEUZa2eXXMgZTVSL5q1n4H7sQ0X6CdJDqqeCFA==
   optionalDependencies:
-    "@esbuild/aix-ppc64" "0.21.2"
-    "@esbuild/android-arm" "0.21.2"
-    "@esbuild/android-arm64" "0.21.2"
-    "@esbuild/android-x64" "0.21.2"
-    "@esbuild/darwin-arm64" "0.21.2"
-    "@esbuild/darwin-x64" "0.21.2"
-    "@esbuild/freebsd-arm64" "0.21.2"
-    "@esbuild/freebsd-x64" "0.21.2"
-    "@esbuild/linux-arm" "0.21.2"
-    "@esbuild/linux-arm64" "0.21.2"
-    "@esbuild/linux-ia32" "0.21.2"
-    "@esbuild/linux-loong64" "0.21.2"
-    "@esbuild/linux-mips64el" "0.21.2"
-    "@esbuild/linux-ppc64" "0.21.2"
-    "@esbuild/linux-riscv64" "0.21.2"
-    "@esbuild/linux-s390x" "0.21.2"
-    "@esbuild/linux-x64" "0.21.2"
-    "@esbuild/netbsd-x64" "0.21.2"
-    "@esbuild/openbsd-x64" "0.21.2"
-    "@esbuild/sunos-x64" "0.21.2"
-    "@esbuild/win32-arm64" "0.21.2"
-    "@esbuild/win32-ia32" "0.21.2"
-    "@esbuild/win32-x64" "0.21.2"
+    "@esbuild/aix-ppc64" "0.23.0"
+    "@esbuild/android-arm" "0.23.0"
+    "@esbuild/android-arm64" "0.23.0"
+    "@esbuild/android-x64" "0.23.0"
+    "@esbuild/darwin-arm64" "0.23.0"
+    "@esbuild/darwin-x64" "0.23.0"
+    "@esbuild/freebsd-arm64" "0.23.0"
+    "@esbuild/freebsd-x64" "0.23.0"
+    "@esbuild/linux-arm" "0.23.0"
+    "@esbuild/linux-arm64" "0.23.0"
+    "@esbuild/linux-ia32" "0.23.0"
+    "@esbuild/linux-loong64" "0.23.0"
+    "@esbuild/linux-mips64el" "0.23.0"
+    "@esbuild/linux-ppc64" "0.23.0"
+    "@esbuild/linux-riscv64" "0.23.0"
+    "@esbuild/linux-s390x" "0.23.0"
+    "@esbuild/linux-x64" "0.23.0"
+    "@esbuild/netbsd-x64" "0.23.0"
+    "@esbuild/openbsd-arm64" "0.23.0"
+    "@esbuild/openbsd-x64" "0.23.0"
+    "@esbuild/sunos-x64" "0.23.0"
+    "@esbuild/win32-arm64" "0.23.0"
+    "@esbuild/win32-ia32" "0.23.0"
+    "@esbuild/win32-x64" "0.23.0"
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -12241,10 +12247,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
   integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
 
-typescript@^5.4.3:
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.3.tgz#5c6fedd4c87bee01cd7a528a30145521f8e0feff"
-  integrity sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==
+typescript@^5.5.3:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.3.tgz#e1b0a3c394190838a0b168e771b0ad56a0af0faa"
+  integrity sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==
 
 typical@^4.0.0:
   version "4.0.0"