@mantou/gem 2.0.0 → 2.1.1

package/src/elements/base/gesture.ts

@@ -1,6 +1,7 @@
-import { GemElement, html } from '../../lib/element';
+import { createCSSSheet, GemElement } from '../../lib/element';
 import type { Emitter } from '../../lib/decorators';
-import { attribute, emitter, mounted, shadow } from '../../lib/decorators';
+import { adoptedStyle, attribute, emitter, mounted } from '../../lib/decorators';
+import { css } from '../../lib/utils';
 
 export type PanEventDetail = {
   // movement
@@ -44,6 +45,14 @@ function angleAB(
   );
 }
 
+const style = createCSSSheet(css`
+  :scope:where(:not([hidden])) {
+    display: block;
+    user-select: none;
+    touch-action: attr(touch-action, none);
+  }
+`);
+
 /**
  * 块级元素，如果要设置成 `contents`，则内容块要设置 `touch-action: none`
  * https://javascript.info/pointer-events#event-pointercancel
@@ -59,7 +68,7 @@ function angleAB(
  *
  * @attr touch-action
  */
-@shadow()
+@adoptedStyle(style)
 export class GemGestureElement extends GemElement {
   @emitter pan: Emitter<PanEventDetail>;
   @emitter pinch: Emitter<PinchEventDetail>;
@@ -75,11 +84,8 @@ export class GemGestureElement extends GemElement {
 
   #startEventMap: Map<number, PointerEvent> = new Map();
 
-  /** 指针移动事件记录 */
-  movesMap: Map<number, PanEventDetail[]> = new Map();
-
   #getMoves = (pointerId: number) => {
-    return this.movesMap.get(pointerId) || [];
+    return this._movesMap.get(pointerId) || [];
   };
 
   #getStartEvent = (pointerId: number) => {
@@ -87,7 +93,7 @@ export class GemGestureElement extends GemElement {
   };
 
   #getOtherLastMove = (pointerId: number) => {
-    for (const id of this.movesMap.keys()) {
+    for (const id of this._movesMap.keys()) {
       if (id !== pointerId) {
         const moves = this.#getMoves(id);
         return moves[moves.length - 1] || this.#getStartEvent(id);
@@ -130,7 +136,7 @@ export class GemGestureElement extends GemElement {
   #onStart = (evt: PointerEvent) => {
     evt.stopPropagation();
     this.setPointerCapture(evt.pointerId);
-    this.movesMap.set(evt.pointerId, []);
+    this._movesMap.set(evt.pointerId, []);
     this.#startEventMap.set(evt.pointerId, evt);
     if (evt.isPrimary) {
       this.#pressed = false;
@@ -163,7 +169,7 @@ export class GemGestureElement extends GemElement {
       moves.push(move);
       this.pan(move);
 
-      if (this.movesMap.size !== 1) {
+      if (this._movesMap.size !== 1) {
         const secondaryPoint = this.#getOtherLastMove(pointerId) as PanEventDetail;
         const moveLen = Math.sqrt(movementX ** 2 + movementY ** 2);
         const distanceLen = Math.sqrt(
@@ -205,7 +211,7 @@ export class GemGestureElement extends GemElement {
     const { pointerId } = evt;
     window.clearTimeout(this.#pressTimer);
 
-    if (this.movesMap.size === 1) {
+    if (this._movesMap.size === 1) {
       this.end(null);
     }
 
@@ -239,10 +245,12 @@ export class GemGestureElement extends GemElement {
       }
     }
 
-    this.movesMap.delete(pointerId);
+    this._movesMap.delete(pointerId);
     this.#startEventMap.delete(pointerId);
   };
 
+  #preventDefault = (evt: Event) => evt.preventDefault();
+
   @mounted()
   #init = () => {
     this.addEventListener('pointerdown', this.#onStart);
@@ -252,19 +260,9 @@ export class GemGestureElement extends GemElement {
     // 为什么空白区域会自动触发 `pointercancel`?
     this.addEventListener('pointercancel', this.#onEnd);
 
-    this.addEventListener('dragstart', (evt) => evt.preventDefault());
+    this.addEventListener('dragstart', this.#preventDefault);
   };
 
-  render() {
-    return html`
-      <style>
-        :host(:where(:not([hidden]))) {
-          display: block;
-          user-select: none;
-          touch-action: ${this.touchAction || 'none'};
-        }
-      </style>
-      <slot></slot>
-    `;
-  }
+  /** 指针移动事件记录 */
+  _movesMap: Map<number, PanEventDetail[]> = new Map();
 }

package/src/elements/base/link.ts

@@ -11,6 +11,7 @@ import {
   mounted,
   effect,
   boolattribute,
+  template,
 } from '../../lib/decorators';
 import { history, basePathStore } from '../../lib/history';
 import { absoluteLocation, css } from '../../lib/utils';
@@ -85,7 +86,7 @@ export class GemLinkElement extends GemElement {
   }
 
   #onClick = async () => {
-    const locationString = this.getLocationString();
+    const locationString = this._getLocationString();
 
     if (!locationString) return;
 
@@ -133,12 +134,10 @@ export class GemLinkElement extends GemElement {
     }
   };
 
-  #preventDefault = (e: MouseEvent) => {
-    e.preventDefault();
-  };
+  #preventDefault = (e: MouseEvent) => e.preventDefault();
 
   #getHint = () => {
-    const locationString = this.getLocationString();
+    const locationString = this._getLocationString();
     return isExternal(locationString)
       ? locationString
       : new URL(history.basePath + locationString, location.origin).toString();
@@ -157,7 +156,8 @@ export class GemLinkElement extends GemElement {
     this.addEventListener('pointerenter', this.#preload);
   }
 
-  render() {
+  @template()
+  #content = () => {
     return html`
       <a
         part=${this.link}
@@ -168,12 +168,12 @@ export class GemLinkElement extends GemElement {
         <slot></slot>
       </a>
     `;
-  }
+  };
 
   /**
    * 如果该元素是外部链接返回 URL，否则返回路径（不包含 basePath）
    */
-  getLocationString() {
+  _getLocationString() {
     if (this.route) {
       const queryProp = this.#routeOptions?.query || '';
       const hashProp = this.#routeOptions?.hash || '';
@@ -208,6 +208,6 @@ export class GemActiveLinkElement extends GemLinkElement {
   #updateState = () => {
     const { path, query, hash } = history.getParams();
     const isMatchPattern = this.pattern && matchPath(this.pattern, path);
-    this.active = !!isMatchPattern || path + query + hash === this.getLocationString();
+    this.active = !!isMatchPattern || path + query + hash === this._getLocationString();
   };
 }

package/src/elements/base/modal-factory.ts

@@ -1,5 +1,5 @@
 import { GemElement } from '../../lib/element';
-import { connect, createStore, updateStore } from '../../lib/store';
+import { connect, createStore } from '../../lib/store';
 import { history } from '../../lib/history';
 import { aria, mounted, shadow } from '../../lib/decorators';
 
@@ -46,7 +46,7 @@ export function createModalClass<T extends Record<string, unknown>>(options: T)
       this.inertStore = ([...document.body.children] as HTMLElement[]).filter((e) => !e.inert);
       this.inertStore.forEach((e) => (e.inert = true));
       document.body.append(instance);
-      const changeStore = () => updateStore(this.store, { [open]: true, ...opts });
+      const changeStore = () => this.store({ [open]: true, ...opts });
       setTimeout(() => {
         changeStore();
         history.push({
@@ -75,7 +75,7 @@ export function createModalClass<T extends Record<string, unknown>>(options: T)
     static closeHandle() {
       this.inertStore.forEach((e) => (e.inert = false));
       this.instance?.remove();
-      updateStore(this.store, { [open]: false, ...options });
+      this.store({ [open]: false, ...options });
       return final;
     }
 

package/src/elements/base/route.ts

@@ -3,7 +3,7 @@ import { createState, GemElement, html } from '../../lib/element';
 import type { Emitter } from '../../lib/decorators';
 import { property, emitter, boolattribute, shadow, effect, template, light } from '../../lib/decorators';
 import type { Store } from '../../lib/store';
-import { createStore, updateStore, connect } from '../../lib/store';
+import { createStore, connect } from '../../lib/store';
 import type { UpdateHistoryParams } from '../../lib/history';
 import { titleStore, history } from '../../lib/history';
 import type { QueryString } from '../../lib/utils';
@@ -205,7 +205,7 @@ export class GemLightRouteElement extends GemElement {
   #updateLocationStore = () => {
     if (!this.locationStore) return;
     const { path, query, hash, data } = history.getParams();
-    updateStore(this.locationStore, {
+    this.locationStore({
       path,
       params: this.currentParams,
       query,
@@ -256,7 +256,7 @@ export class GemLightRouteElement extends GemElement {
 
   // history or i18n
   @effect((i) => [i.scrollContainer])
-  #connectTriggerStore = () => connect(this.trigger.store, () => this.#state({}));
+  #connectTriggerStore = () => this.trigger.store && connect(this.trigger.store, () => this.#state());
 
   #updateContentDep = () => {
     const { path, query, hash } = this.trigger.getParams();
@@ -310,7 +310,7 @@ export class GemLightRouteElement extends GemElement {
     if (this.trigger === history) {
       // 嵌套路由执行顺序也是从父到子
       if (location.href !== titleStore.url || route?.title) {
-        updateStore(titleStore, { url: location.href, title: route?.title });
+        titleStore({ url: location.href, title: route?.title });
       }
     }
     const contentOrLoader = content || getContent?.(params, this.shadowRoot || this);

package/src/elements/base/title.ts

@@ -13,8 +13,8 @@
  */
 
 import { GemElement, html } from '../../lib/element';
-import { attribute, boolattribute, effect, mounted, shadow } from '../../lib/decorators';
-import { updateStore, connect } from '../../lib/store';
+import { attribute, boolattribute, effect, mounted, shadow, template } from '../../lib/decorators';
+import { connect } from '../../lib/store';
 import { titleStore } from '../../lib/history';
 
 // 避免重定向时的中间状态标题
@@ -50,7 +50,7 @@ export class GemTitleElement extends GemElement {
   static title = document.title;
 
   static setTitle(title: string) {
-    updateStore(titleStore, { title });
+    titleStore({ title });
   }
 
   @effect((i) => [i.inert])
@@ -63,7 +63,8 @@ export class GemTitleElement extends GemElement {
     this.#ob.observe(this, { characterData: true, childList: true, subtree: true });
   };
 
-  render = () => {
+  @template()
+  #content = () => {
     // 多个 <gem-title> 时，最终 document.title 按渲染顺序决定
     setDocumentTitle(this.textContent?.trim(), this.prefix, this.suffix);
     return html`${GemTitleElement.title}`;

package/src/elements/base/unsafe.ts

@@ -1,5 +1,5 @@
 import { GemElement } from '../../lib/element';
-import { attribute, shadow } from '../../lib/decorators';
+import { attribute, shadow, template } from '../../lib/decorators';
 import { raw } from '../../lib/utils';
 
 /**
@@ -12,7 +12,8 @@ export class GemUnsafeElement extends GemElement {
   @attribute content: string;
   @attribute contentcss: string;
 
-  render() {
+  @template()
+  #content = () => {
     this.shadowRoot!.innerHTML = raw`
       <style>
         :host(:where(:not([hidden]))) {
@@ -22,6 +23,8 @@ export class GemUnsafeElement extends GemElement {
       </style>
       ${this.content}
     `;
+
+    // 不要更新内容
     return undefined;
-  }
+  };
 }

package/src/elements/base/use.ts

@@ -1,5 +1,5 @@
 import { createCSSSheet, GemElement, html } from '../../lib/element';
-import { adoptedStyle, attribute, property, shadow, state } from '../../lib/decorators';
+import { adoptedStyle, attribute, property, shadow, state, template } from '../../lib/decorators';
 import { css } from '../../lib/utils';
 
 const styles = createCSSSheet(css`
@@ -50,10 +50,11 @@ export class GemUseElement extends GemElement {
     }
   };
 
-  render() {
+  @template()
+  #content = () => {
     return html`
       ${this.#getContent()}
       <slot></slot>
     `;
-  }
+  };
 }

package/src/helper/i18n.ts

@@ -113,6 +113,7 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
     this.onChange?.(lang);
   }
 
+  #inConstructor = true;
   constructor(options: I18nOptions<T>) {
     if (!options.resources[options.fallbackLanguage]) {
       throw new GemError('i18n: fallbackLanguage invalid');
@@ -139,6 +140,7 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
     } else {
       this.resetLanguage();
     }
+    this.#inConstructor = false;
   }
 
   get(s: keyof T): string;
@@ -207,14 +209,15 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
     }
     this.resources[lang] = pack;
 
-    // update all element
-    const temp: Element[] = [document.documentElement];
-    while (!!temp.length) {
-      const element = temp.pop()!;
-      (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);
+    if (!this.#inConstructor) {
+      // 更新所有元素，可能会更新许多不必要的元素
+      const temp: Element[] = [document.documentElement];
+      while (!!temp.length) {
+        const element = temp.pop()!;
+        (element as any)[UpdateToken]?.();
+        // 和 gem 更新机制一样使用深度优先
+        temp.push(...[...element.children, ...(element.shadowRoot?.children || [])].reverse());
+      }
     }
 
     if (lang !== this.currentLanguage) {

package/src/helper/theme.ts

@@ -1,14 +1,15 @@
 import type { Store } from '../lib/store';
-import { connect, useStore } from '../lib/store';
-import { camelToKebabCase, randomStr } from '../lib/utils';
+import { connect, createStore } from '../lib/store';
+import { camelToKebabCase, createUpdater, randomStr } from '../lib/utils';
 import type { GemElement } from '../lib/element';
 import { SheetToken, createCSSSheet } from '../lib/element';
 
-export type Theme<T> = ReturnType<typeof createCSSSheet> & {
-  [K in keyof T as K extends `${string}Color`
-    ? `${string & K}${'' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}`
-    : K]: T[K];
-};
+export type Theme<T> = ReturnType<typeof createUpdater<T>> &
+  ReturnType<typeof createCSSSheet> & {
+    [K in keyof T as K extends `${string}Color`
+      ? `${string & K}${'' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}`
+      : K]: T[K];
+  };
 
 const themeStoreMap = new WeakMap();
 const themePropsMap = new WeakMap();
@@ -23,12 +24,12 @@ export function getThemeProps<T>(theme: Theme<T>) {
   return themePropsMap.get(theme) as Theme<T>;
 }
 
-function useThemeFromProps<T extends Record<string, unknown>>(themeObj: T, props: Record<string, string> = {}) {
+function createThemeFromProps<T extends Record<string, unknown>>(themeObj: T, props: Record<string, string> = {}) {
   const salt = randomStr();
   const styleSheet = createCSSSheet({})[SheetToken];
-  const [store, updateStore] = useStore<T>(themeObj);
+  const store = createStore<T>(themeObj);
   const theme: any = new Proxy(
-    { [SheetToken]: styleSheet },
+    createUpdater({ [SheetToken]: styleSheet }, (payload: Partial<T>) => store(payload)),
     {
       get(target: any, key: string) {
         if (!target[key]) {
@@ -58,41 +59,41 @@ function useThemeFromProps<T extends Record<string, unknown>>(themeObj: T, props
     updateContent();
     styleSheet.updateStyle();
   });
-  return [theme as Theme<T>, updateStore] as const;
+  return theme as Theme<T>;
 }
 
 /**
  * 用于 `@adoptedStyle(theme)`，类似 `createCSSSheet`
  */
-export function useScopedTheme<T extends Record<string, unknown>>(themeObj: T) {
-  return useThemeFromProps(themeObj);
+export function createScopedTheme<T extends Record<string, unknown>>(themeObj: T) {
+  return createThemeFromProps(themeObj);
 }
 
-/**全局主题 */
-export function useTheme<T extends Record<string, unknown>>(themeObj: T) {
-  const result = useScopedTheme(themeObj);
-  document.adoptedStyleSheets.push(result[0][SheetToken].getStyle());
+/** 全局主题 */
+export function createTheme<T extends Record<string, unknown>>(themeObj: T) {
+  const result = createScopedTheme(themeObj);
+  document.adoptedStyleSheets.push(result[SheetToken].getStyle());
   return result;
 }
 
-/**用来覆盖全局主题 */
-export function useOverrideTheme<T extends Record<string, unknown>>(theme: Theme<T>, themeObj: Partial<T>) {
-  return useThemeFromProps(themeObj, getThemeProps(theme));
+/** 用来覆盖全局主题 */
+export function createOverrideTheme<T extends Record<string, unknown>>(theme: Theme<T>, themeObj: Partial<T>) {
+  return createThemeFromProps(themeObj, getThemeProps(theme));
 }
 
-export function useDecoratorTheme<T extends Record<string, unknown>>(themeObj: T) {
-  const [themeAsKeys] = useThemeFromProps(themeObj);
+export function createDecoratorTheme<T extends Record<string, unknown>>(themeObj: T) {
+  const themeAsKeys = createThemeFromProps<T>(themeObj);
   const props = getThemeProps(themeAsKeys);
-  const updateDecorator =
+  const update =
     <E extends GemElement, V extends () => T, K = any[] | undefined>(
       getDep?: K extends readonly any[] ? (instance: E) => K : undefined,
     ) =>
     (_: any, { addInitializer, access }: ClassFieldDecoratorContext<E, V> | ClassMethodDecoratorContext<E, V>) => {
       addInitializer(function (this: E) {
-        const [theme, update] = useThemeFromProps({ ...themeObj }, props);
+        const theme = createThemeFromProps({ ...themeObj }, props);
         this.internals.sheets.push(theme[SheetToken].getStyle(this));
-        this.memo(() => update(access.get(this).apply(this)), getDep && (() => getDep(this) as any));
+        this.memo(() => theme(access.get(this).apply(this)), getDep && (() => getDep(this) as any));
       });
     };
-  return [themeAsKeys, updateDecorator] as const;
+  return createUpdater(themeAsKeys, update) as ReturnType<typeof createUpdater<typeof themeAsKeys, typeof update>>;
 }

package/src/lib/decorators.ts

@@ -1,5 +1,5 @@
 import type { createCSSSheet, Metadata, TemplateResult } from './element';
-import { GemElement, UpdateToken, createTemplate, RenderErrorEvent, render } from './element';
+import { GemElement, UpdateToken, _createTemplate, _RenderErrorEvent, render } from './element';
 import { camelToKebabCase, PropProxyMap, GemError } from './utils';
 import type { Store } from './store';
 import * as elementExports from './element';
@@ -273,7 +273,7 @@ export function template<T extends GemElement, V extends () => TemplateResult |
     { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>,
   ) {
     addInitializer(function (this: T) {
-      createTemplate(this, {
+      _createTemplate(this, {
         render: access.get(this).bind(this),
         condition: condition && (() => condition(this) as any),
       });
@@ -287,7 +287,7 @@ export function fallback<T extends GemElement, V extends (err: any) => TemplateR
     { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>,
   ) {
     addInitializer(function (this: T) {
-      this.addEventListener(RenderErrorEvent, ({ detail }: CustomEvent) => {
+      this.addEventListener(_RenderErrorEvent, ({ detail }: CustomEvent) => {
         render(access.get(this).apply(this, [detail]), this.internals.shadowRoot || this);
       });
     });
@@ -456,7 +456,7 @@ export function adoptedStyle(sheet: ReturnType<typeof createCSSSheet>) {
  *  class App extends GemElement {}
  * ```
  */
-export function connectStore(store: Store<unknown>) {
+export function connectStore(store: Store<any>) {
   return function (_: unknown, context: ClassDecoratorContext) {
     pushStaticField(context, 'observedStores', store);
   };

package/src/lib/element.ts

@@ -5,7 +5,7 @@ import type { GemReflectElement } from '../elements/reflect';
 
 import type { Store } from './store';
 import { connect } from './store';
-import { LinkedList, addMicrotask, isArrayChange, addListener, randomStr } from './utils';
+import { LinkedList, addMicrotask, isArrayChange, addListener, randomStr, createUpdater } from './utils';
 
 export { html, svg, render, directive, TemplateResult, SVGTemplateResult } from 'lit-html';
 
@@ -29,19 +29,19 @@ declare global {
   }
 }
 
-const { assign, defineProperty, setPrototypeOf } = Object;
+const { assign, defineProperty } = Object;
 
 defineProperty(Symbol, 'metadata', { value: Symbol.for('Symbol.metadata') });
 
 const execCallback = (fun: any) => typeof fun === 'function' && fun();
 
-// 跨多个 gem 工作
+// 读取构造样式表，跨多个 gem 工作
 export const SheetToken = Symbol.for('gem@sheetToken');
-// proto prop
+// 更新元素，跨多个 gem 工作
 export const UpdateToken = Symbol.for('gem@update');
 
 const BoundaryCSSState = 'gem-style-boundary';
-export const RenderErrorEvent = 'gem@render-error';
+export const _RenderErrorEvent = 'gem@render-error';
 
 // fix modal-factory type error
 const updateTokenAlias = UpdateToken;
@@ -177,8 +177,9 @@ export function createCSSSheet<T extends Record<string, string>>(
     Object.keys(rules).forEach((key) => {
       const isScope = key === '$';
       // 对于已经有 `-` 的保留原始 key，支持覆盖修改
+      // :scope 下可以写嵌套样式 &:xxx，:host() 下不行（子内容可以）
       sheet[key] = isScope || key.includes('-') ? key : `${key}-${randomStr()}`;
-      style += `${isScope ? ':scope,:host' : `.${sheet[key]}`} {${rules[key]}}`;
+      style += `${isScope ? ':where(:scope:not([hidden])),:host(:where(:not([hidden])))' : `.${sheet[key]}`} {${rules[key]}}`;
     });
   }
   styleSheet.setContent(style);
@@ -221,7 +222,7 @@ const appleCSSStyleSheet = (ele: HTMLElement, sheets: CSSStyleSheet[]) => {
 };
 
 /**必须使用在字段中，否则会读取到错误的实例 */
-export let createState: <T>(initState: T) => T & ((state: Partial<T>) => void);
+export let createState: <T>(initState: T) => ReturnType<typeof createUpdater<T>>;
 
 type GetDepFun<T> = () => T;
 type EffectCallback<T> = (depValues: T, oldDepValues?: T) => any;
@@ -260,7 +261,7 @@ function clearEffect(list: EffectItem<any>[]) {
 type Render = () => TemplateResult | null | undefined;
 type RenderItem = { render: Render; condition?: () => boolean };
 
-export let createTemplate: (ele: GemElement, item: RenderItem) => void;
+export let _createTemplate: (ele: GemElement, item: RenderItem) => void;
 
 export type Metadata = Partial<ShadowRootInit> & {
   /** 内容可被外部样式化 */
@@ -273,7 +274,7 @@ export type Metadata = Partial<ShadowRootInit> & {
     }
   >;
   // 实例化时使用到，DevTools 需要读取
-  observedStores: Store<unknown>[];
+  observedStores: Store<any>[];
   adoptedStyleSheets?: Sheet<unknown>[];
   // 以下静态字段仅供外部读取，没有实际作用
   observedProperties?: string[];
@@ -331,20 +332,16 @@ export abstract class GemElement extends HTMLElement {
   static {
     createState = <T>(initState: T) => {
       const ele = currentConstructGemElement;
-      const state: any = (payload: Partial<T>) => {
+      const state = createUpdater(initState, (payload) => {
         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);
+      return state;
     };
     createRef = () => new RefObject(currentConstructGemElement);
-    createTemplate = (ele, item) => ele.#renderList.push(item);
+    _createTemplate = (ele, item) => ele.#renderList.push(item);
   }
 
   constructor() {
@@ -388,7 +385,8 @@ export abstract class GemElement extends HTMLElement {
   }
 
   get #renderItem() {
-    return this.#renderList.find((e) => !e.condition || e.condition());
+    // 从末尾开始寻找，允许被覆盖
+    return this.#renderList.findLast((e) => !e.condition || e.condition());
   }
 
   get internals() {
@@ -422,7 +420,7 @@ export abstract class GemElement extends HTMLElement {
       if (temp === undefined) return;
       render(temp, this.#renderRoot);
     } catch (err) {
-      this.dispatchEvent(new CustomEvent(RenderErrorEvent, { bubbles: true, composed: true, detail: err }));
+      this.dispatchEvent(new CustomEvent(_RenderErrorEvent, { bubbles: true, composed: true, detail: err }));
     }
   };