diff --git a/packages/duoyun-ui/src/patterns/nav.ts b/packages/duoyun-ui/src/patterns/nav.ts
index 4602d81c..aa4781ce 100644
--- a/packages/duoyun-ui/src/patterns/nav.ts
+++ b/packages/duoyun-ui/src/patterns/nav.ts
@@ -1,5 +1,5 @@
 import { history } from '@mantou/gem/lib/history';
-import { createCSSSheet, GemElement, TemplateResult, html, render } from '@mantou/gem/lib/element';
+import { createCSSSheet, GemElement, TemplateResult, html } from '@mantou/gem/lib/element';
 import { adoptedStyle, attribute, connectStore, customElement, property, state } from '@mantou/gem/lib/decorators';
 import { addListener, classMap, css } from '@mantou/gem/lib/utils';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
@@ -193,7 +193,7 @@ export class DyPatNavElement extends GemElement<State> {
   @attribute name: string;
   @property links?: Links;
   @property logo?: string | Element | DocumentFragment;
-  @property renderSlot?: (ele: Element) => TemplateResult | undefined;
+  @property navSlot?: TemplateResult;
 
   @state switching: boolean;
 
@@ -225,8 +225,6 @@ export class DyPatNavElement extends GemElement<State> {
     drawerOpen: false,
   };
 
-  #navSlot = document.createElement('div');
-
   #onMobileItemClick = (evt: MouseEvent) => {
     (evt.currentTarget as HTMLLIElement).classList.toggle('open-dropdown');
   };
@@ -249,8 +247,6 @@ export class DyPatNavElement extends GemElement<State> {
   };
 
   render = () => {
-    render(this.renderSlot ? this.renderSlot(this.#navSlot) : html``, this.#navSlot);
-
     return html`
       <dy-use
         class="menu"
@@ -309,7 +305,7 @@ export class DyPatNavElement extends GemElement<State> {
         <div style="flex-grow: 1" @click=${() => this.setState({ drawerOpen: false })}></div>
       </nav>
 
-      ${this.#navSlot}
+      ${this.navSlot}
     `;
   };
 }
diff --git a/packages/gem-analyzer/src/index.ts b/packages/gem-analyzer/src/index.ts
index 17864b44..fa0dcd98 100644
--- a/packages/gem-analyzer/src/index.ts
+++ b/packages/gem-analyzer/src/index.ts
@@ -50,6 +50,7 @@ interface ConstructorParam {
 }
 
 export interface ElementDetail {
+  shadow: boolean;
   name: string;
   constructorName: string;
   constructorExtendsName: string;
@@ -66,6 +67,7 @@ export interface ElementDetail {
   cssStates: string[];
 }
 
+const shadowDecoratorName = ['shadow'];
 const elementDecoratorName = ['customElement'];
 const attrDecoratorName = ['attribute', 'boolattribute', 'numattribute'];
 const propDecoratorName = ['property'];
@@ -80,6 +82,7 @@ const lifecyclePopsOrMethods = ['state', 'willMount', 'render', 'mounted', 'shou
 export const parseElement = (declaration: ClassDeclaration) => {
   const detail: ElementDetail = {
     name: '',
+    shadow: false,
     constructorName: '',
     constructorExtendsName: '',
     constructorParams: [],
@@ -240,9 +243,12 @@ export const parseElement = (declaration: ClassDeclaration) => {
 export const getElements = (file: SourceFile) => {
   const result: ElementDetail[] = [];
   for (const declaration of file.getClasses()) {
-    const elementDeclaration = declaration
-      .getDecorators()
-      .find((decorator) => elementDecoratorName.includes(decorator.getName()));
+    // need support other decorators?
+    const elementDecorators = declaration.getDecorators();
+    const elementDeclaration = elementDecorators.find((decorator) =>
+      elementDecoratorName.includes(decorator.getName()),
+    );
+    const shadowDeclaration = elementDecorators.find((decorator) => shadowDecoratorName.includes(decorator.getName()));
     const elementTag =
       elementDeclaration
         ?.getCallExpression()!
@@ -256,9 +262,10 @@ export const getElements = (file: SourceFile) => {
         .find((e) => e.getTagName() === 'customElement')
         ?.getCommentText();
     if (elementTag) {
-      const detail = {
+      const detail: ElementDetail = {
         ...parseElement(declaration),
         name: elementTag,
+        shadow: !!shadowDeclaration,
       };
       if (!detail.constructorName.startsWith('_')) {
         result.push(detail);
diff --git a/packages/gem-book/src/element/elements/main.ts b/packages/gem-book/src/element/elements/main.ts
index 7b3c6e9f..f1997123 100644
--- a/packages/gem-book/src/element/elements/main.ts
+++ b/packages/gem-book/src/element/elements/main.ts
@@ -181,9 +181,7 @@ const style = createCSSSheet(css`
     border-radius: ${theme.smallRound};
   }
   gem-book-pre {
-    z-index: 2;
     margin: 2rem 0px;
-    border-radius: ${theme.normalRound};
   }
   iframe {
     width: 100%;
diff --git a/packages/gem-book/src/element/elements/plugin.ts b/packages/gem-book/src/element/elements/plugin.ts
index 69edd98d..8671880a 100644
--- a/packages/gem-book/src/element/elements/plugin.ts
+++ b/packages/gem-book/src/element/elements/plugin.ts
@@ -9,7 +9,7 @@ import { BookConfig } from '../../common/config';
 import { debounce } from '../../common/utils';
 import { icons } from '../elements/icons';
 import { getRanges, getParts, joinPath, getURL, escapeHTML, capitalize } from '../lib/utils';
-import { linkStyle, parseMarkdown, tableStyle, unsafeRenderHTML } from '../lib/renderer';
+import { parseMarkdown, unsafeRenderHTML } from '../lib/renderer';
 import { originDocLang, selfI18n } from '../helper/i18n';
 
 /**
@@ -56,10 +56,6 @@ export class GemBookPluginElement<T = any> extends GemElement<T> {
     parseMarkdown,
     unsafeRenderHTML,
   };
-  static shaderStyles = {
-    tableStyle,
-    linkStyle,
-  };
 
   static caches = new Map<typeof GemBookPluginElement, Map<string, any>>();
   static theme = theme;
diff --git a/packages/gem-book/src/element/elements/pre.ts b/packages/gem-book/src/element/elements/pre.ts
index 374b55ce..61483b67 100644
--- a/packages/gem-book/src/element/elements/pre.ts
+++ b/packages/gem-book/src/element/elements/pre.ts
@@ -250,6 +250,8 @@ const styles = createCSSSheet(css`
     display: block;
     font-family: ${theme.codeFont};
     background: rgb(from ${theme.textColor} r g b / 0.05);
+    border-radius: ${theme.normalRound};
+    overflow: hidden;
   }
   .filename {
     font-size: 0.75em;
diff --git a/packages/gem-book/src/element/helper/default-theme.ts b/packages/gem-book/src/element/helper/default-theme.ts
index 9a15c0ae..caf463c4 100644
--- a/packages/gem-book/src/element/helper/default-theme.ts
+++ b/packages/gem-book/src/element/helper/default-theme.ts
@@ -6,7 +6,7 @@ export const defaultTheme = {
   sidebarWidthSmall: '270px',
 
   sidebarWidth: '304px',
-  maxMainWidth: '48rem',
+  maxMainWidth: '52rem',
   headerHeight: '56px',
   normalRound: '0.5rem',
   smallRound: '0.25rem',
diff --git a/packages/gem-book/src/plugins/api.ts b/packages/gem-book/src/plugins/api.ts
index f93720b8..bca890c6 100644
--- a/packages/gem-book/src/plugins/api.ts
+++ b/packages/gem-book/src/plugins/api.ts
@@ -8,11 +8,10 @@ const gemAnalyzer = 'https://esm.sh/gem-analyzer';
 type State = { elements?: ElementDetail[]; exports?: ExportDetail[]; error?: any };
 
 customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof GemBookElement) => {
-  const { Gem, theme, Utils, shaderStyles } = GemBookPluginElement;
-  const { html, customElement, attribute, numattribute, createCSSSheet, css, adoptedStyle } = Gem;
+  const { Gem, theme, Utils } = GemBookPluginElement;
+  const { html, customElement, attribute, numattribute, createCSSSheet, css, adoptedStyle, BoundaryCSSState } = Gem;
 
   const styles = createCSSSheet(css`
-    ${shaderStyles.tableStyle}
     table {
       tr td:first-of-type {
         white-space: nowrap;
@@ -40,6 +39,7 @@ customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof Ge
     constructor() {
       super();
       this.cacheState(() => [this.name, this.src]);
+      this.internals.states.delete(BoundaryCSSState);
     }
 
     state: State = {};
@@ -81,6 +81,7 @@ customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof Ge
 
     #renderElement = (detail: ElementDetail) => {
       const {
+        shadow,
         name: eleName,
         description: eleDescription = '',
         constructorName,
@@ -99,6 +100,9 @@ customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof Ge
 
       text += eleDescription + '\n\n';
       if (constructorExtendsName) {
+        if (shadow) {
+          text += `Shadow DOM; `;
+        }
         text += `Extends ${this.#renderCode(constructorExtendsName)}\n\n`;
       }
 
diff --git a/packages/gem-book/src/plugins/include.ts b/packages/gem-book/src/plugins/include.ts
index 9469ccf5..6d1b759c 100644
--- a/packages/gem-book/src/plugins/include.ts
+++ b/packages/gem-book/src/plugins/include.ts
@@ -7,10 +7,9 @@ type State = {
 
 customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof GemBookElement) => {
   const { Gem, theme, Utils } = GemBookPluginElement;
-  const { attribute, customElement, html, style } = Gem;
+  const { attribute, customElement, html, BoundaryCSSState } = Gem;
 
   @customElement('gbp-include')
-  @style({ scoped: false })
   class _GbpIncludeElement extends GemBookPluginElement<State> {
     @attribute src: string;
     @attribute range: string;
@@ -18,6 +17,7 @@ customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof Ge
     constructor() {
       super();
       this.cacheState(() => [this.src, this.range]);
+      this.internals.states.delete(BoundaryCSSState);
     }
 
     state: State = {
diff --git a/packages/gem-book/src/plugins/raw.ts b/packages/gem-book/src/plugins/raw.ts
index c4d1b5ed..78d32cc8 100644
--- a/packages/gem-book/src/plugins/raw.ts
+++ b/packages/gem-book/src/plugins/raw.ts
@@ -30,7 +30,6 @@ customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof Ge
     }
     gem-book-pre {
       margin: 2rem 0px;
-      border-radius: ${theme.normalRound};
       animation: display 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
     }
     @keyframes display {
diff --git a/packages/gem-book/src/plugins/trans-status.ts b/packages/gem-book/src/plugins/trans-status.ts
index 97f9e5fc..43b66513 100644
--- a/packages/gem-book/src/plugins/trans-status.ts
+++ b/packages/gem-book/src/plugins/trans-status.ts
@@ -16,13 +16,17 @@ const locales: Record<string, Record<Status, string>> = {
 
 customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof GemBookElement) => {
   const { Gem, Utils, selfI18n } = GemBookPluginElement;
-  const { html, customElement, attribute, style } = Gem;
+  const { html, customElement, attribute, BoundaryCSSState } = Gem;
 
   @customElement('gbp-trans-status')
-  @style({ scoped: false })
   class _GbpTransStatusElement extends GemBookPluginElement {
     @attribute status: Status;
 
+    constructor() {
+      super();
+      this.internals.states.delete(BoundaryCSSState);
+    }
+
     get #status() {
       return this.status || 'none';
     }
diff --git a/packages/gem-devtools/src/modules/panel.ts b/packages/gem-devtools/src/modules/panel.ts
index 20b29ec6..84273ec7 100644
--- a/packages/gem-devtools/src/modules/panel.ts
+++ b/packages/gem-devtools/src/modules/panel.ts
@@ -58,11 +58,18 @@ export class Panel extends GemElement {
       <devtools-section name="Observed Properties" .items=${panelStore.observedProperties}></devtools-section>
       <devtools-section name="Observed Stores" .items=${panelStore.observedStores}></devtools-section>
       <devtools-section name="Adopted Styles" .items=${panelStore.adoptedStyles}></devtools-section>
-      <devtools-section
-        name="State"
-        .path=${panelStore.state.length ? ['state'] : undefined}
-        .items=${panelStore.state}
-      ></devtools-section>
+      ${panelStore.state.length
+        ? html`<devtools-section name="State" .path=${['state']} .items=${panelStore.state}></devtools-section>`
+        : ''}
+      ${panelStore.stateList.map(
+        (state, index) => html`
+          <devtools-section
+            name=${`State #${index}`}
+            .path=${['internals', 'stateList', `${index}`]}
+            .items=${state}
+          ></devtools-section>
+        `,
+      )}
       <devtools-section name="Emitters" .items=${panelStore.emitters}></devtools-section>
       <devtools-section name="Slots" tip=${TIP} .items=${panelStore.slots}></devtools-section>
       <devtools-section name="CSS States" tip=${TIP} .items=${panelStore.cssStates}></devtools-section>
diff --git a/packages/gem-devtools/src/scripts/get-gem.ts b/packages/gem-devtools/src/scripts/get-gem.ts
index dac20997..aa6ad1e6 100644
--- a/packages/gem-devtools/src/scripts/get-gem.ts
+++ b/packages/gem-devtools/src/scripts/get-gem.ts
@@ -226,12 +226,25 @@ export const getSelectedGem = function (data: PanelStore): PanelStore | string {
       type: 'boolean',
     });
   });
+  $0.internals?.stateList?.forEach((state: any) => {
+    data.stateList.push(
+      Object.keys(state).map((k) => {
+        const value = state[k];
+        return {
+          name: k,
+          value: objectToString(value),
+          type: typeof value,
+        };
+      }),
+    );
+  });
   memberSet.forEach((key) => {
     memberSet.delete(key);
     // GemElement 不允许覆盖内置生命周期，所以不考虑
     if (elementMethod.has(key)) return;
     if (key === 'state') {
       $0.state &&
+        $0.setState &&
         Object.keys($0.state).forEach((k) => {
           const value = $0.state[k];
           data.state.push({
diff --git a/packages/gem-devtools/src/scripts/preload.ts b/packages/gem-devtools/src/scripts/preload.ts
index af3aedf6..fbadea95 100644
--- a/packages/gem-devtools/src/scripts/preload.ts
+++ b/packages/gem-devtools/src/scripts/preload.ts
@@ -31,7 +31,8 @@ export function preload() {
             return c.reduce((pp, cc) => pp || (cc === '' ? p : p[cc]), undefined);
           } else {
             const value = p[c];
-            return typeof value === 'function' && c !== 'constructor' ? value.bind(p) : value;
+            // 支持 state 函数
+            return value instanceof Function && c !== 'constructor' ? value.bind(p) : value;
           }
         }
       }, $0);
diff --git a/packages/gem-devtools/src/store.ts b/packages/gem-devtools/src/store.ts
index bdc6177e..b21475f3 100644
--- a/packages/gem-devtools/src/store.ts
+++ b/packages/gem-devtools/src/store.ts
@@ -32,6 +32,7 @@ export class PanelStore {
   observedStores = new Array<Item>();
   adoptedStyles = new Array<Item>();
   state = new Array<Item>();
+  stateList = new Array<Item[]>();
   emitters = new Array<Item>();
   slots = new Array<Item>();
   cssStates = new Array<Item>();
diff --git a/packages/gem-devtools/src/test.ts b/packages/gem-devtools/src/test.ts
index 14e30c52..54ad0983 100644
--- a/packages/gem-devtools/src/test.ts
+++ b/packages/gem-devtools/src/test.ts
@@ -30,6 +30,7 @@ changePanelStore({
   lifecycleMethod: [{ name: 'render', value: 'function ()', type: 'function' }],
   method: [{ name: 'click', value: 'function ()', type: 'function' }],
   state: [{ name: 'loaded', value: true, type: 'boolean' }],
+  stateList: [[{ name: 'opened', value: true, type: 'boolean' }]],
   properties: [
     { name: 'mute', value: 'true', type: 'boolean' },
     { name: 'data', value: 'null', type: 'object' },
diff --git a/packages/gem-examples/src/hash/index.ts b/packages/gem-examples/src/hash/index.ts
index ce3b1ff0..0b8de2c4 100644
--- a/packages/gem-examples/src/hash/index.ts
+++ b/packages/gem-examples/src/hash/index.ts
@@ -1,4 +1,4 @@
-import { GemElement, render, html, customElement, shadow } from '@mantou/gem';
+import { GemElement, render, html, customElement, shadow, addListener } from '@mantou/gem';
 import '@mantou/gem/elements/link';
 
 import '../elements/layout';
@@ -6,19 +6,11 @@ import '../elements/layout';
 @customElement('app-article')
 @shadow()
 class _Article extends GemElement {
-  constructor() {
-    super();
-    window.addEventListener('hashchange', this.checkHash);
-  }
-
   mounted = () => {
     // 在当前页面刷新浏览器会保留滚动位置
     // 开新窗口测试带 hash 链接
     this.checkHash();
-  };
-
-  unmounted = () => {
-    window.removeEventListener('hashchange', this.checkHash);
+    return addListener(window, 'hashchange', this.checkHash);
   };
 
   checkHash = () => {
diff --git a/packages/gem-examples/src/perf-demo/index.ts b/packages/gem-examples/src/perf-demo/index.ts
index d0e48fa7..f24cf585 100644
--- a/packages/gem-examples/src/perf-demo/index.ts
+++ b/packages/gem-examples/src/perf-demo/index.ts
@@ -1,4 +1,14 @@
-import { GemElement, async, connectStore, customElement, html, property, render, shadow, useStore } from '@mantou/gem';
+import {
+  GemElement,
+  async,
+  connectStore,
+  customElement,
+  html,
+  property,
+  render,
+  shadow,
+  useStore,
+} from '@mantou/gem';
 
 import '../elements/layout';
 
diff --git a/packages/gem-examples/src/scope/index.ts b/packages/gem-examples/src/scope/index.ts
index dca8783e..16d362c7 100644
--- a/packages/gem-examples/src/scope/index.ts
+++ b/packages/gem-examples/src/scope/index.ts
@@ -1,4 +1,13 @@
-import { GemElement, adoptedStyle, createCSSSheet, css, customElement, html, render, shadow } from '@mantou/gem';
+import {
+  GemElement,
+  adoptedStyle,
+  createCSSSheet,
+  css,
+  customElement,
+  html,
+  render,
+  shadow,
+} from '@mantou/gem';
 
 import '../elements/layout';
 
diff --git a/packages/gem-examples/src/styled/index.ts b/packages/gem-examples/src/styled/index.ts
index 4eb9f2cd..d085c3e2 100644
--- a/packages/gem-examples/src/styled/index.ts
+++ b/packages/gem-examples/src/styled/index.ts
@@ -1,4 +1,13 @@
-import { GemElement, html, styled, createCSSSheet, render, adoptedStyle, customElement, SheetToken } from '@mantou/gem';
+import {
+  GemElement,
+  html,
+  styled,
+  createCSSSheet,
+  render,
+  adoptedStyle,
+  customElement,
+  SheetToken,
+} from '@mantou/gem';
 
 import '../elements/layout';
 
diff --git a/packages/gem/src/elements/base/dialog.ts b/packages/gem/src/elements/base/dialog.ts
index 3cc4521e..d9056fcd 100644
--- a/packages/gem/src/elements/base/dialog.ts
+++ b/packages/gem/src/elements/base/dialog.ts
@@ -1,5 +1,5 @@
 import { GemElement } from '../../lib/element';
-import { attribute, state, connectStore, aria } from '../../lib/decorators';
+import { attribute, state, connectStore, aria, mounted } from '../../lib/decorators';
 import { history } from '../../lib/history';
 
 const final = Symbol();
@@ -22,14 +22,6 @@ export abstract class GemDialogBaseElement extends GemElement {
   #parentElement: Node | null;
   #inertStore: HTMLElement[] = [];
 
-  constructor() {
-    super();
-    this.effect(
-      () => (this.inert = true),
-      () => [],
-    );
-  }
-
   /**
    * 进入关闭状态
    */
@@ -60,6 +52,9 @@ export abstract class GemDialogBaseElement extends GemElement {
     this.opened = true;
   };
 
+  @mounted()
+  #init = () => (this.inert = true);
+
   /**@final */
   open = () => {
     if (this.opened) return;
diff --git a/packages/gem/src/elements/base/gesture.ts b/packages/gem/src/elements/base/gesture.ts
index 30b8fb8a..32f1e452 100644
--- a/packages/gem/src/elements/base/gesture.ts
+++ b/packages/gem/src/elements/base/gesture.ts
@@ -1,5 +1,5 @@
 import { GemElement, html } from '../../lib/element';
-import { attribute, emitter, Emitter, shadow } from '../../lib/decorators';
+import { attribute, emitter, Emitter, mounted, shadow } from '../../lib/decorators';
 
 export type PanEventDetail = {
   // movement
@@ -69,18 +69,6 @@ export class GemGestureElement extends GemElement {
 
   @attribute touchAction: string;
 
-  constructor() {
-    super();
-    this.addEventListener('pointerdown', this.#onStart);
-    this.addEventListener('pointermove', this.#onMoveSet);
-    this.addEventListener('pointerup', this.#onEnd);
-    this.addEventListener('pointerleave', this.#onEnd); // 有时候 up 没有触发？
-    // 为什么空白区域会自动触发 `pointercancel`?
-    this.addEventListener('pointercancel', this.#onEnd);
-
-    this.addEventListener('dragstart', (evt) => evt.preventDefault());
-  }
-
   #pressed = false; // 触发 press 之后不触发其他事件
   #pressTimer = 0;
 
@@ -254,6 +242,18 @@ export class GemGestureElement extends GemElement {
     this.#startEventMap.delete(pointerId);
   };
 
+  @mounted()
+  #init = () => {
+    this.addEventListener('pointerdown', this.#onStart);
+    this.addEventListener('pointermove', this.#onMoveSet);
+    this.addEventListener('pointerup', this.#onEnd);
+    this.addEventListener('pointerleave', this.#onEnd); // 有时候 up 没有触发？
+    // 为什么空白区域会自动触发 `pointercancel`?
+    this.addEventListener('pointercancel', this.#onEnd);
+
+    this.addEventListener('dragstart', (evt) => evt.preventDefault());
+  };
+
   render() {
     return html`
       <style>
diff --git a/packages/gem/src/elements/base/link.ts b/packages/gem/src/elements/base/link.ts
index 5700b203..98530632 100644
--- a/packages/gem/src/elements/base/link.ts
+++ b/packages/gem/src/elements/base/link.ts
@@ -1,5 +1,16 @@
 import { createCSSSheet, GemElement, html } from '../../lib/element';
-import { attribute, property, state, part, connectStore, shadow, aria, adoptedStyle } from '../../lib/decorators';
+import {
+  attribute,
+  property,
+  state,
+  part,
+  connectStore,
+  shadow,
+  aria,
+  adoptedStyle,
+  mounted,
+  effect,
+} from '../../lib/decorators';
 import { history, basePathStore } from '../../lib/history';
 import { absoluteLocation, css } from '../../lib/utils';
 import { ifDefined } from '../../lib/directives';
@@ -70,11 +81,6 @@ export class GemLinkElement extends GemElement {
     return this.hint || 'on';
   }
 
-  constructor() {
-    super();
-    this.addEventListener('click', this.#onClick);
-  }
-
   #onClick = async () => {
     const locationString = this.getLocationString();
 
@@ -140,6 +146,11 @@ export class GemLinkElement extends GemElement {
       : new URL(history.basePath + locationString, location.origin).toString();
   };
 
+  @mounted()
+  #init() {
+    this.addEventListener('click', this.#onClick);
+  }
+
   render() {
     return html`
       <a
@@ -187,12 +198,10 @@ export class GemActiveLinkElement extends GemLinkElement {
   @attribute pattern: string; // 使用匹配模式设定 active
   @state active: boolean;
 
-  constructor() {
-    super();
-    this.effect(() => {
-      const { path, query, hash } = history.getParams();
-      const isMatchPattern = this.pattern && matchPath(this.pattern, path);
-      this.active = !!isMatchPattern || path + query + hash === this.getLocationString();
-    });
-  }
+  @effect()
+  #updateState = () => {
+    const { path, query, hash } = history.getParams();
+    const isMatchPattern = this.pattern && matchPath(this.pattern, path);
+    this.active = !!isMatchPattern || path + query + hash === this.getLocationString();
+  };
 }
diff --git a/packages/gem/src/elements/base/modal-factory.ts b/packages/gem/src/elements/base/modal-factory.ts
index bb921e3b..c19aa3c3 100644
--- a/packages/gem/src/elements/base/modal-factory.ts
+++ b/packages/gem/src/elements/base/modal-factory.ts
@@ -1,7 +1,7 @@
 import { GemElement } from '../../lib/element';
 import { connect, createStore, updateStore } from '../../lib/store';
 import { history } from '../../lib/history';
-import { shadow } from '../../lib/decorators';
+import { aria, mounted, shadow } from '../../lib/decorators';
 
 const open = Symbol('open mark');
 
@@ -16,8 +16,9 @@ const open = Symbol('open mark');
 export function createModalClass<T extends Record<string, unknown>>(options: T) {
   const final = Symbol();
 
-  return @shadow()
-  class extends GemElement {
+  @shadow()
+  @aria({ role: 'alertdialog', ariaModal: 'true' })
+  class ModalElement extends GemElement {
     static inertStore: HTMLElement[] = [];
     static instance: GemElement | null = null;
     /**
@@ -85,21 +86,14 @@ export function createModalClass<T extends Record<string, unknown>>(options: T)
       return true;
     }
 
-    constructor() {
-      super();
-      this.internals.role = 'alertdialog';
-      this.internals.ariaModal = 'true';
+    label = '';
 
-      this.effect(
-        () => connect(history.store, this.update),
-        () => [],
-      );
-      this.effect(
-        () => connect(new.target.store, this.update),
-        () => [],
-      );
-    }
+    @mounted()
+    #connectHistory = () => connect(history.store, this.update);
 
-    label = '';
-  };
+    @mounted()
+    #connectStore = () => connect(ModalElement.store, this.update);
+  }
+
+  return ModalElement;
 }
diff --git a/packages/gem/src/elements/base/reflect.ts b/packages/gem/src/elements/base/reflect.ts
index cadc6e96..c7ca2dc2 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, effect, mounted, property } from '../../lib/decorators';
 
 const START = 'gem-reflect-start';
 const END = 'gem-reflect-end';
@@ -37,37 +37,29 @@ export class GemReflectElement extends GemElement {
     return this.method || 'append';
   }
 
-  constructor() {
-    super();
+  @mounted()
+  #init = () => {
+    this.hidden = true;
+    this.dataset.gemReflect = '';
+  };
 
-    this.effect(
-      () => {
-        this.hidden = true;
-        this.dataset.gemReflect = '';
-      },
-      () => [],
-    );
+  #startNode = createReflectFragmentTag(START);
+  #endNode = createReflectFragmentTag(END);
+  #childNodes: undefined | ChildNode[];
 
-    const startNode = createReflectFragmentTag(START);
-    const endNode = createReflectFragmentTag(END);
-    let childNodes: undefined | ChildNode[];
-
-    this.effect(
-      () => {
-        (childNodes || [startNode, ...this.childNodes, endNode]).forEach((node, index, arr) => {
-          const prev = arr[index - 1];
-          if (prev) {
-            prev.after(node);
-          } else {
-            this.target[this.#method](node);
-          }
-        });
-        return () => {
-          childNodes = getReflectFragment(startNode);
-          childNodes.forEach((node) => node.remove());
-        };
-      },
-      () => [this.target],
-    );
-  }
+  @effect((i) => [i.target])
+  #changeTarget = () => {
+    (this.#childNodes || [this.#startNode, ...this.childNodes, this.#endNode]).forEach((node, index, arr) => {
+      const prev = arr[index - 1];
+      if (prev) {
+        prev.after(node);
+      } else {
+        this.target[this.#method](node);
+      }
+    });
+    return () => {
+      this.#childNodes = getReflectFragment(this.#startNode);
+      this.#childNodes.forEach((node) => node.remove());
+    };
+  };
 }
diff --git a/packages/gem/src/elements/base/route.ts b/packages/gem/src/elements/base/route.ts
index 1848f953..f3c305d7 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, shadow } from '../../lib/decorators';
+import { BoundaryCSSState, createState, GemElement, html, TemplateResult } from '../../lib/element';
+import { property, emitter, Emitter, boolattribute, shadow, effect, template, willMount } from '../../lib/decorators';
 import { createStore, updateStore, Store, connect } from '../../lib/store';
 import { titleStore, history, UpdateHistoryParams } from '../../lib/history';
 import { addListener, QueryString } from '../../lib/utils';
@@ -113,11 +113,6 @@ export function createHistoryParams(route: RouteItem, options?: RouteOptions): U
   };
 }
 
-interface ConstructorOptions {
-  isLight?: boolean;
-  routes?: RouteItem[] | RoutesObject;
-}
-
 const INIT_CONTENT = html``;
 
 type State = {
@@ -139,7 +134,7 @@ const scrollPositionMap = new Map<string, number>();
  * @fires error
  * @fires loading
  */
-export class GemLightRouteElement extends GemElement<State> {
+export class GemLightRouteElement extends GemElement {
   @boolattribute transition: boolean;
   @property routes?: RouteItem[] | RoutesObject;
   /**
@@ -168,8 +163,6 @@ export class GemLightRouteElement extends GemElement<State> {
   /**当前匹配的路由的 params */
   currentParams: Params = {};
 
-  #lastLoader?: Promise<TemplateResult | undefined>;
-
   /**不要多个 `<gem-route>` 共享，因为那样会导致后面的元素卸载前触发更新 */
   static createLocationStore = () => {
     const { path, query, hash, data } = history.getParams();
@@ -201,14 +194,7 @@ export class GemLightRouteElement extends GemElement<State> {
     return typeof this.scrollContainer === 'function' ? this.scrollContainer() : this.scrollContainer;
   }
 
-  constructor({ routes }: ConstructorOptions = {}) {
-    super();
-    this.routes = this.routes || routes;
-  }
-
-  state: State = {
-    content: INIT_CONTENT,
-  };
+  #state = createState<State>({ content: INIT_CONTENT });
 
   #updateLocationStore = () => {
     if (!this.locationStore) return;
@@ -232,13 +218,14 @@ export class GemLightRouteElement extends GemElement<State> {
     }
   };
 
+  #lastLoader?: Promise<TemplateResult | undefined>;
   #setContent = (route: RouteItem | null, params: Params, content?: TemplateResult) => {
     this.beforeroutechange(route);
     this.#lastLoader = undefined;
     this.currentRoute = route;
     this.currentParams = params;
     const changeContent = async () => {
-      this.setState({ content });
+      this.#state({ content });
       // 要确保新页面能读取到新路由数据
       this.#updateLocationStore();
       // 等待页面渲染完成
@@ -253,45 +240,39 @@ export class GemLightRouteElement extends GemElement<State> {
     }
   };
 
-  mounted() {
-    this.effect(
-      () => {
-        if (!this.#scrollContainer) return;
-        return addListener(history, 'beforechange', () =>
-          scrollPositionMap.set(history.currentKey, this.#scrollContainer!.scrollTop),
-        );
-      },
-      () => [this.scrollContainer],
-    );
+  @willMount()
+  #unBoundary = () => this.internals.states.delete(BoundaryCSSState);
 
-    this.effect(
-      // 触发 this.#update
-      () => connect(this.trigger.store, () => this.setState({})),
-      () => [this.trigger],
+  @effect((i) => [i.scrollContainer])
+  #rememberScrollPosition = () => {
+    if (!this.#scrollContainer) return;
+    return addListener(history, 'beforechange', () =>
+      scrollPositionMap.set(history.currentKey, this.#scrollContainer!.scrollTop),
     );
+  };
 
-    this.effect(
-      ([key, path], old) => {
-        // 只有查询参数改变
-        if (old && key === old[0] && path === old[1]) {
-          this.#updateLocationStore();
-          return;
-        }
-        this.update();
-      },
-      () => {
-        const { path, query, hash } = this.trigger.getParams();
-        return [this.key, path, query, hash] as const;
-      },
-    );
-  }
+  // history or i18n
+  @effect((i) => [i.scrollContainer])
+  #connectTriggerStore = () => connect(this.trigger.store, () => this.#state({}));
 
-  shouldUpdate() {
-    return this.inert ? false : true;
-  }
+  #updateContentDep = () => {
+    const { path, query, hash } = this.trigger.getParams();
+    return [this.key, path, query, hash] as const;
+  };
+
+  @effect((i) => i.#updateContentDep())
+  #updateContent = ([key, path]: any, old: any) => {
+    // 只有查询参数改变
+    if (old && key === old[0] && path === old[1]) {
+      this.#updateLocationStore();
+      return;
+    }
+    this.update();
+  };
 
-  render() {
-    const { content } = this.state;
+  @template((i) => !i.inert)
+  #render() {
+    const { content } = this.#state;
     if (content === undefined) return;
 
     if (!this.shadowRoot) {
@@ -310,6 +291,7 @@ export class GemLightRouteElement extends GemElement<State> {
     `;
   }
 
+  // 重写 `update`，并暴露为公共字段
   update = () => {
     const { path, hash, query } = this.trigger.getParams();
     const { route, params = {} } = GemRouteElement.findRoute(this.routes, path);
diff --git a/packages/gem/src/elements/base/title.ts b/packages/gem/src/elements/base/title.ts
index 5c58e79a..a36d4f5c 100644
--- a/packages/gem/src/elements/base/title.ts
+++ b/packages/gem/src/elements/base/title.ts
@@ -14,7 +14,7 @@
  */
 
 import { GemElement, html } from '../../lib/element';
-import { attribute, boolattribute, shadow } from '../../lib/decorators';
+import { attribute, boolattribute, effect, shadow } from '../../lib/decorators';
 import { updateStore, connect } from '../../lib/store';
 import { titleStore } from '../../lib/history';
 import { addMicrotask } from '../../lib/utils';
@@ -60,22 +60,18 @@ export class GemTitleElement extends GemElement {
     updateStore(titleStore, { title });
   }
 
-  constructor() {
-    super();
+  @effect(() => [])
+  #mounted = () => {
     new MutationObserver(() => this.update()).observe(this, {
       characterData: true,
       childList: true,
       subtree: true,
     });
-  }
-
-  mounted = () => {
-    this.effect(
-      () => !this.inert && connect(titleStore, this.update),
-      () => [this.inert],
-    );
   };
 
+  @effect((i) => [i.inert])
+  #connectStore = () => !this.inert && connect(titleStore, this.update);
+
   render() {
     // 多个 <gem-title> 时，最终 document.title 按执行顺序决定
     setDocumentTitle(this.textContent?.trim(), this.prefix, this.suffix);
diff --git a/packages/gem/src/elements/base/unsafe.ts b/packages/gem/src/elements/base/unsafe.ts
index 0f24d5d4..574217f2 100644
--- a/packages/gem/src/elements/base/unsafe.ts
+++ b/packages/gem/src/elements/base/unsafe.ts
@@ -1,5 +1,6 @@
 import { GemElement } from '../../lib/element';
 import { attribute, shadow } from '../../lib/decorators';
+import { raw } from '../../lib/utils';
 
 /**
  * @customElement gem-unsafe
@@ -11,27 +12,16 @@ export class GemUnsafeElement extends GemElement {
   @attribute content: string;
   @attribute contentcss: string;
 
-  constructor() {
-    super();
-    this.effect(
-      () => {
-        if (this.shadowRoot) {
-          this.shadowRoot.innerHTML = `
-            <style>
-              :host(:where(:not([hidden]))) {
-                display: contents;
-              }
-              ${this.contentcss}
-            </style>
-            ${this.content}
-          `;
-        }
-      },
-      () => [this.content, this.contentcss],
-    );
-  }
-
   render() {
+    this.shadowRoot!.innerHTML = raw`
+      <style>
+        :host(:where(:not([hidden]))) {
+          display: contents;
+        }
+        ${this.contentcss}
+      </style>
+      ${this.content}
+    `;
     return undefined;
   }
 }
diff --git a/packages/gem/src/helper/react-utils.ts b/packages/gem/src/helper/react-utils.ts
index 832bb881..b3867ba0 100644
--- a/packages/gem/src/helper/react-utils.ts
+++ b/packages/gem/src/helper/react-utils.ts
@@ -18,15 +18,13 @@ export function renderReactNode(ele: any, node: ReactNode) {
   // async
   ele.react.render(node);
 
-  // override
   const routeEle = ele instanceof HTMLElement ? ele : ele.host;
-  const originUnmounted = routeEle.unmounted;
-  if (!originUnmounted?.react) {
-    routeEle.unmounted = () => {
-      originUnmounted?.apply(routeEle);
-      ele.react.unmount();
-    };
-    routeEle.unmounted.react = true;
+  if (!routeEle.reactCallback) {
+    routeEle.effect(
+      () => () => ele.react.unmount(),
+      () => [],
+    );
+    routeEle.reactCallback = true;
   }
 }
 
diff --git a/packages/gem/src/lib/decorators.ts b/packages/gem/src/lib/decorators.ts
index de91a976..c9904084 100644
--- a/packages/gem/src/lib/decorators.ts
+++ b/packages/gem/src/lib/decorators.ts
@@ -1,7 +1,7 @@
 import type { GemReflectElement } from '../elements/reflect';
 
-import { createCSSSheet, GemElement, UpdateToken, Metadata } from './element';
-import { camelToKebabCase, randomStr, PropProxyMap } from './utils';
+import { createCSSSheet, GemElement, UpdateToken, Metadata, TemplateResult } from './element';
+import { camelToKebabCase, randomStr, PropProxyMap, GemError } from './utils';
 import { Store } from './store';
 import * as elementExports from './element';
 import * as decoratorsExports from './decorators';
@@ -9,7 +9,7 @@ import * as storeExports from './store';
 import * as versionExports from './version';
 
 type GemElementPrototype = GemElement<any>;
-type StaticField = Exclude<keyof Metadata, keyof ShadowRootInit | 'aria' | 'noBlocking' | 'scoped' | 'layer'>;
+type StaticField = Exclude<keyof Metadata, keyof ShadowRootInit | 'aria' | 'noBlocking'>;
 
 const { deleteProperty, getOwnPropertyDescriptor, defineProperty } = Reflect;
 const { getPrototypeOf, assign } = Object;
@@ -267,7 +267,6 @@ export function property<T extends GemElement<any>>(_: undefined, context: Class
 
 /**
  * 依赖 `GemElement.memo`
- * 不能设置私有字段 https://github.com/tc39/proposal-decorators/issues/509
  *
  * For example
  * ```ts
@@ -280,14 +279,22 @@ export function property<T extends GemElement<any>>(_: undefined, context: Class
  * ```
  */
 export function memo<T extends GemElement<any>, V = any, K = any[] | undefined>(
-  getDep: K extends any[] ? (instance: T) => K : undefined,
+  getDep: K extends readonly any[] ? (instance: T) => K : undefined,
 ) {
-  return function (_: any, { addInitializer, name, access }: ClassGetterDecoratorContext<T, V>) {
+  return function (
+    _: any,
+    context: ClassGetterDecoratorContext<T, V> | ClassFieldDecoratorContext<T> | ClassMethodDecoratorContext<T>,
+  ) {
+    const { addInitializer, name, access, kind } = context;
     addInitializer(function (this: T) {
-      this.memo(
-        () => defineProperty(this, name, { configurable: true, value: access.get(this) }),
-        getDep && (() => getDep(this) as any),
-      );
+      const dep = getDep && (() => getDep(this) as any);
+      if (kind === 'getter') {
+        // 不能设置私有字段 https://github.com/tc39/proposal-decorators/issues/509
+        if (context.private) throw new GemError('not support');
+        this.memo(() => defineProperty(this, name, { configurable: true, value: access.get(this) }), dep);
+      } else {
+        this.memo((access.get(this) as any).bind(this) as any, dep);
+      }
     });
   };
 }
@@ -295,12 +302,11 @@ export function memo<T extends GemElement<any>, V = any, K = any[] | undefined>(
 /**
  * 依赖 `GemElement.effect`
  * 方法执行在字段前面
- * 暂时不确定是否能使用私有名称 https://github.com/tc39/proposal-decorators/issues/536
  *
  * For example
  * ```ts
  *  class App extends GemElement {
- *    @memo(() => [])
+ *    @effect(() => [])
  *    #fetchData() {
  *      console.log('fetch')
  *    }
@@ -311,7 +317,7 @@ export function effect<
   T extends GemElement<any>,
   V extends (depValues: K, oldDepValues?: K) => any,
   K = any[] | undefined,
->(getDep?: K extends any[] ? (instance: T) => K : undefined) {
+>(getDep?: K extends readonly any[] ? (instance: T) => K : undefined) {
   return function (
     _: any,
     { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>,
@@ -322,6 +328,45 @@ export function effect<
   };
 }
 
+export function unmounted<T extends GemElement<any>, V extends () => any>() {
+  return function (
+    _: any,
+    { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>,
+  ) {
+    addInitializer(function (this: T) {
+      this.effect(
+        () => access.get(this).bind(this) as any,
+        () => [],
+      );
+    });
+  };
+}
+
+/**`@memo` 别名 */
+export function willMount() {
+  return memo(() => []);
+}
+
+/**`@effect` 别名 */
+export function mounted() {
+  return effect(() => []);
+}
+
+export function template<T extends GemElement<any>, V extends () => TemplateResult | null | undefined>(
+  /**当返回 `false` 时不进行更新，包括 `memo` */
+  shouldRender?: (instance: T) => boolean,
+) {
+  return function (
+    _: any,
+    { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>,
+  ) {
+    addInitializer(function (this: T) {
+      if (shouldRender) this.shouldUpdate = () => shouldRender(this);
+      this.render = access.get(this).bind(this);
+    });
+  };
+}
+
 function defineCSSState(target: GemElementPrototype, prop: string, stateStr: string) {
   defineProperty(target, prop, {
     configurable: true,
@@ -526,14 +571,6 @@ export function aria(info: Metadata['aria']) {
   };
 }
 
-export function style(info: Pick<Metadata, 'scoped' | 'layer'>) {
-  return function (_: any, context: ClassDecoratorContext) {
-    const metadata = context.metadata as Metadata;
-    metadata.scoped = info.scoped;
-    metadata.layer = info.layer;
-  };
-}
-
 /**
  * 定义自定义元素
  *
diff --git a/packages/gem/src/lib/element.ts b/packages/gem/src/lib/element.ts
index 5b70bab4..3fedadd0 100644
--- a/packages/gem/src/lib/element.ts
+++ b/packages/gem/src/lib/element.ts
@@ -23,7 +23,8 @@ declare global {
     readonly metadata: symbol;
   }
 }
-const { assign, defineProperty } = Object;
+
+const { assign, defineProperty, setPrototypeOf } = Object;
 
 defineProperty(Symbol, 'metadata', { value: Symbol.for('Symbol.metadata') });
 
@@ -34,7 +35,7 @@ export const SheetToken = Symbol.for('gem@sheetToken');
 // proto prop
 export const UpdateToken = Symbol.for('gem@update');
 
-const scopedToken = 'gem-style-scope';
+export const BoundaryCSSState = 'gem-style-boundary';
 // fix modal-factory type error
 const updateTokenAlias = UpdateToken;
 
@@ -55,10 +56,8 @@ class GemCSSSheet {
   #record = new Map<any, CSSStyleSheet>();
   #applyd = new Map<CSSStyleSheet, string>();
   getStyle(host?: HTMLElement) {
-    // GemElement Metadata, 支持 closed 模式
-    const metadate = host && ((host as any).constructor[Symbol.metadata] || {});
+    const metadate = host && (((host as any).constructor[Symbol.metadata] || {}) as Metadata);
     const isLight = metadate && !metadate.mode;
-    const layer = metadate?.layer;
 
     // 对同一类 dom 只使用同一个样式表
     const key = isLight ? host.constructor : this;
@@ -73,13 +72,10 @@ class GemCSSSheet {
     if (!this.#applyd.has(sheet)) {
       let style = this.#content;
       let scope = '';
-      if (layer !== undefined) {
-        style = `@layer ${layer} {${style}}`;
-      }
-      if (isLight && metadate.scoped !== false) {
+      if (isLight) {
         // light dom 嵌套时需要选择子元素
         // `> *` 实际上是多范围？是否存在性能问题
-        scope = `@scope (${host.tagName}) to (:state(${scopedToken}) > *)`;
+        scope = `@scope (${host.tagName}) to (:state(${BoundaryCSSState}) > *)`;
         // 不能使用 @layer，两个 @layer 不能覆盖，只有顺序起作用
         // 所以外部不能通过元素名称选择器来覆盖样式，除非样式在之前插入（会自动反转应用到尾部， see `appleCSSStyleSheet`）
         style = `${scope}{ ${style} }`;
@@ -165,6 +161,9 @@ const appleCSSStyleSheet = (ele: HTMLElement, sheets: CSSStyleSheet[]) => {
   return () => updateStyleSheets(map, sheets, -1);
 };
 
+/**必须使用在字段中，否则会读取到错误的实例 */
+export let createState: <T>(initState: T) => T & ((state: Partial<T>) => void);
+
 type GetDepFun<T> = () => T;
 type EffectCallback<T> = (depValues: T, oldDepValues?: T) => any;
 type EffectItem<T> = {
@@ -177,13 +176,10 @@ type EffectItem<T> = {
 };
 
 export type Metadata = Partial<ShadowRootInit> & {
-  // 手动设置 `false` 让自定义元素不作为样式边界，只工作于 light dom
-  scoped?: boolean;
-  layer?: string;
   noBlocking?: boolean;
   aria?: Partial<
     ARIAMixin & {
-      //  自动添加 tabIndex；支持 `disabled` 属性
+      /**自动添加 tabIndex；支持 `disabled` 属性 */
       focusable: boolean;
     }
   >;
@@ -212,66 +208,83 @@ const tick = (timeStamp = performance.now()) => {
 };
 noBlockingTaskList.addEventListener('start', () => addMicrotask(tick));
 
+let currentConstructGemElement: GemElement<any>;
+
 export abstract class GemElement<State = Record<string, unknown>> extends HTMLElement {
   // 禁止覆盖自定义元素原生生命周期方法
   // https://github.com/microsoft/TypeScript/issues/21388#issuecomment-934345226
   static #final = Symbol();
 
-  // 定义当前元素的状态，和 attr/prop 的本质区别是不为外部输入
-  readonly state?: State;
-
   #renderRoot: HTMLElement | ShadowRoot;
-  #internals: ElementInternals;
+  #internals: ElementInternals & { stateList: ReturnType<typeof createState>[] };
+  #effectList: EffectItem<any>[] = [];
+  #memoList: EffectItem<any>[] = [];
   #isAppendReason?: boolean;
   // 和 isConnected 有区别
   #isMounted?: boolean;
   #isConnected?: boolean;
-  #effectList?: EffectItem<any>[];
   #rendering?: boolean;
-  #memoList?: EffectItem<any>[];
   #unmountCallback?: any;
   #clearStyle?: any;
 
   [updateTokenAlias]() {
-    if (this.#isMounted) {
-      addMicrotask(this.#update);
-    }
+    addMicrotask(this.#update);
+  }
+
+  static {
+    createState = <T>(initState: T) => {
+      const ele = currentConstructGemElement;
+      const state: any = (payload: Partial<T>) => {
+        assign(state, payload);
+        // 避免无限刷新
+        if (!ele.#rendering) addMicrotask(ele.#update);
+      };
+      setPrototypeOf(state, null);
+      delete state.name;
+      delete state.length;
+      ele.#internals.stateList.push(state);
+      assign(state, initState);
+      return state as T & ((this: GemElement, state: Partial<T>) => void);
+    };
   }
 
   constructor() {
     super();
 
-    const { mode, serializable, delegatesFocus, slotAssignment, aria, scoped } = this.#metadata;
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    currentConstructGemElement = this;
+
+    const { mode, serializable, delegatesFocus, slotAssignment, aria } = this.#metadata;
     const { focusable, ...internalsAria } = aria || {};
 
     this.#renderRoot = !mode ? this : this.attachShadow({ mode, serializable, delegatesFocus, slotAssignment });
-    this.#internals = this.attachInternals();
+    this.#internals = this.attachInternals() as GemElement['internals'];
+    this.#internals.stateList = [];
 
     assign(this.#internals, internalsAria);
-    if (!mode && scoped !== false) this.#internals.states.add(scopedToken);
+
+    // light dom 有 render 则不应该被外部样式化
+    // 特殊情况手动 `remove` 状态
+    if (!mode && this.render) this.#internals.states.add(BoundaryCSSState);
 
     // https://stackoverflow.com/questions/43836886/failed-to-construct-customelement-error-when-javascript-file-is-placed-in-head
     // focusable 元素一般同时具备 disabled 属性
     // 和原生元素行为保持一致，disabled 时不触发 click 事件
     let hasInitTabIndex: boolean | undefined;
-    this.effect(
-      ([disabled = false]) => {
+    this.#effectList.push({
+      inConstructor: true,
+      getDep: () => [(this as any).disabled],
+      callback: ([disabled = false]) => {
         if (hasInitTabIndex === undefined) hasInitTabIndex = this.hasAttribute('tabindex');
-
         this.#internals.ariaDisabled = String(disabled);
-
-        if (focusable && !hasInitTabIndex) {
-          this.tabIndex = -Number(disabled);
-        }
-
+        if (focusable && !hasInitTabIndex) this.tabIndex = -Number(disabled);
         if ((focusable || delegatesFocus) && disabled) {
           return addListener(this, 'click', (e: Event) => e.isTrusted && e.stopImmediatePropagation(), {
             capture: true,
           });
         }
       },
-      () => [(this as any).disabled],
-    );
+    });
   }
 
   get #metadata(): Metadata {
@@ -282,6 +295,8 @@ export abstract class GemElement<State = Record<string, unknown>> extends HTMLEl
     return this.#internals;
   }
 
+  // 定义当前元素的状态，和 attr/prop 的本质区别是不为外部输入
+  readonly state?: State;
   /**
    * @helper
    * 设置元素 state，会触发更新
@@ -339,7 +354,6 @@ export abstract class GemElement<State = Record<string, unknown>> extends HTMLEl
    * ```
    * */
   effect = <K = any[] | undefined>(callback: EffectCallback<K>, getDep?: K extends any[] ? () => K : undefined) => {
-    if (!this.#effectList) this.#effectList = [];
     const effectItem: EffectItem<K> = {
       callback,
       getDep,
@@ -371,7 +385,6 @@ export abstract class GemElement<State = Record<string, unknown>> extends HTMLEl
    * ```
    * */
   memo = <K = any[] | undefined>(callback: EffectCallback<K>, getDep?: K extends any[] ? () => K : undefined) => {
-    if (!this.#memoList) this.#memoList = [];
     this.#memoList.push({
       callback,
       getDep,
@@ -403,7 +416,7 @@ export abstract class GemElement<State = Record<string, unknown>> extends HTMLEl
    *
    * - 不提供 `render` 时显示子内容
    * - 返回 `null` 时渲染空的子内容
-   * - 返回 `undefined` 时不会调用 `render()`, 也就是不会更新以前的内容
+   * - 返回 `undefined` 时不会更新现有内容
    * */
   render?(): TemplateResult | null | undefined;
 
@@ -548,8 +561,8 @@ export abstract class GemElement<State = Record<string, unknown>> extends HTMLEl
     return GemElement.#final;
   }
 
-  #clearEffect = (list?: EffectItem<any>[]) => {
-    return list?.filter((e) => {
+  #clearEffect = (list: EffectItem<any>[]) => {
+    return list.filter((e) => {
       execCallback(e.preCallback);
       e.initialized = false;
       return e.inConstructor;