From f073dfb538519c1f77e7dcad3ae79fd51ad7f321 Mon Sep 17 00:00:00 2001 From: mantou132 <709922234@qq.com> Date: Mon, 25 Dec 2023 13:41:21 +0800 Subject: [PATCH] [gem-book] Support `unnamed` slot --- .../duoyun-ui/docs/en/02-elements/flow.md | 29 ++++++++++++--- .../duoyun-ui/docs/zh/02-elements/flow.md | 29 ++++++++++++--- .../duoyun-ui/src/elements/action-text.ts | 4 ++- packages/duoyun-ui/src/elements/alert.ts | 4 ++- packages/duoyun-ui/src/elements/avatar.ts | 36 +++++++++---------- packages/duoyun-ui/src/elements/banner.ts | 3 ++ packages/duoyun-ui/src/elements/button.ts | 7 ++++ packages/duoyun-ui/src/elements/card.ts | 1 + packages/duoyun-ui/src/elements/collapse.ts | 2 ++ packages/duoyun-ui/src/elements/copy.ts | 1 + packages/duoyun-ui/src/elements/drop-area.ts | 3 ++ .../duoyun-ui/src/elements/file-picker.ts | 3 ++ packages/duoyun-ui/src/elements/flow.ts | 5 ++- packages/duoyun-ui/src/elements/heading.ts | 4 ++- packages/duoyun-ui/src/elements/help-text.ts | 4 ++- packages/duoyun-ui/src/elements/loading.ts | 4 ++- packages/duoyun-ui/src/elements/more.ts | 12 ++++++- packages/duoyun-ui/src/elements/options.ts | 4 ++- packages/duoyun-ui/src/elements/result.ts | 4 ++- packages/duoyun-ui/src/elements/segmented.ts | 7 ++-- .../duoyun-ui/src/elements/status-light.ts | 4 ++- packages/duoyun-ui/src/elements/tag.ts | 3 ++ packages/gem-devtools/src/scripts/get-gem.ts | 8 +++-- .../gem-devtools/src/scripts/inspect-value.ts | 2 +- 24 files changed, 137 insertions(+), 46 deletions(-) diff --git a/packages/duoyun-ui/docs/en/02-elements/flow.md b/packages/duoyun-ui/docs/en/02-elements/flow.md index 2ef6f345..412eaaee 100644 --- a/packages/duoyun-ui/docs/en/02-elements/flow.md +++ b/packages/duoyun-ui/docs/en/02-elements/flow.md @@ -2,10 +2,31 @@ ## Example - + + +```json +{ + "style": "width: 100%", + "graph": { + "id": "root", + "children": [ + { "id": "n1", "data": "Node 1" }, + { "id": "n2", "data": "Node 2" }, + { "id": "n3", "data": "Node 3" }, + { "id": "n4", "data": "Node 4" }, + { "id": "n5", "data": "Node 5" } + ], + "edges": [ + { "id": "e1", "sources": ["n1"], "targets": ["n2"] }, + { "id": "e2", "sources": ["n1"], "targets": ["n3"] }, + { "id": "e3", "sources": ["n1"], "targets": ["n4"] }, + { "id": "e4", "sources": ["n4"], "targets": ["n5"] } + ] + } +} +``` + + ## API diff --git a/packages/duoyun-ui/docs/zh/02-elements/flow.md b/packages/duoyun-ui/docs/zh/02-elements/flow.md index 2ef6f345..412eaaee 100644 --- a/packages/duoyun-ui/docs/zh/02-elements/flow.md +++ b/packages/duoyun-ui/docs/zh/02-elements/flow.md @@ -2,10 +2,31 @@ ## Example - + + +```json +{ + "style": "width: 100%", + "graph": { + "id": "root", + "children": [ + { "id": "n1", "data": "Node 1" }, + { "id": "n2", "data": "Node 2" }, + { "id": "n3", "data": "Node 3" }, + { "id": "n4", "data": "Node 4" }, + { "id": "n5", "data": "Node 5" } + ], + "edges": [ + { "id": "e1", "sources": ["n1"], "targets": ["n2"] }, + { "id": "e2", "sources": ["n1"], "targets": ["n3"] }, + { "id": "e3", "sources": ["n1"], "targets": ["n4"] }, + { "id": "e4", "sources": ["n4"], "targets": ["n5"] } + ] + } +} +``` + + ## API diff --git a/packages/duoyun-ui/src/elements/action-text.ts b/packages/duoyun-ui/src/elements/action-text.ts index db2e6e80..fe2c8a71 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 } from '@mantou/gem/lib/decorators'; +import { adoptedStyle, customElement, attribute, state, slot } 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` @adoptedStyle(style) @adoptedStyle(focusStyle) export class DuoyunActionTextElement extends GemElement { + @slot static unnamed: string; + @attribute tooltip: string; @attribute color: string; @state active: boolean; diff --git a/packages/duoyun-ui/src/elements/alert.ts b/packages/duoyun-ui/src/elements/alert.ts index 1126c4be..2b953c99 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 } from '@mantou/gem/lib/decorators'; +import { adoptedStyle, customElement, attribute, property, slot } from '@mantou/gem/lib/decorators'; import { GemElement, html } from '@mantou/gem/lib/element'; import { createCSSSheet, css } from '@mantou/gem/lib/utils'; @@ -50,6 +50,8 @@ type Status = 'positive' | 'notice' | 'negative' | 'informative' | 'default'; @customElement('dy-alert') @adoptedStyle(style) export class DuoyunAlertElement extends GemElement { + @slot static unnamed: string; + @attribute header: string; @attribute status: Status; diff --git a/packages/duoyun-ui/src/elements/avatar.ts b/packages/duoyun-ui/src/elements/avatar.ts index 003925a1..634137a6 100644 --- a/packages/duoyun-ui/src/elements/avatar.ts +++ b/packages/duoyun-ui/src/elements/avatar.ts @@ -37,20 +37,22 @@ const style = createCSSSheet(css` :host([size='large']) { width: 3.8em; } - .content { + .img { + display: block; width: 100%; aspect-ratio: 1; - position: absolute; - inset: 0; - display: flex; - justify-content: center; - align-items: center; border-radius: var(--radius); object-fit: cover; background: ${theme.hoverBackgroundColor}; box-sizing: border-box; } - :host([status]:not([status=''])) .content { + .img::before { + content: ''; + position: absolute; + inset: 0; + background-color: inherit; + } + :host([status]:not([status=''])) .img { --m: radial-gradient( circle at calc(100% - var(--offset)) var(--offset), #0000 var(--mask), @@ -103,19 +105,13 @@ export class DuoyunAvatarElement extends GemElement { } -
- ${this.src && - html` - ${this.alt - `} - -
+ ${this.alt ${this.status ? html`
` : ''} `; diff --git a/packages/duoyun-ui/src/elements/banner.ts b/packages/duoyun-ui/src/elements/banner.ts index 474e7123..6420593f 100644 --- a/packages/duoyun-ui/src/elements/banner.ts +++ b/packages/duoyun-ui/src/elements/banner.ts @@ -7,6 +7,7 @@ import { Emitter, property, boolattribute, + slot, } from '@mantou/gem/lib/decorators'; import { GemElement, html } from '@mantou/gem/lib/element'; import { createCSSSheet, css } from '@mantou/gem/lib/utils'; @@ -82,6 +83,8 @@ type Status = 'positive' | 'notice' | 'negative' | 'default'; @customElement('dy-banner') @adoptedStyle(style) export class DuoyunBannerElement extends GemElement { + @slot static unnamed: string; + @boolattribute closable: boolean; @attribute status: Status; diff --git a/packages/duoyun-ui/src/elements/button.ts b/packages/duoyun-ui/src/elements/button.ts index 5d45c69c..741bdd07 100644 --- a/packages/duoyun-ui/src/elements/button.ts +++ b/packages/duoyun-ui/src/elements/button.ts @@ -9,6 +9,7 @@ import { RefObject, state, part, + slot, } from '@mantou/gem/lib/decorators'; import { GemElement, html } from '@mantou/gem/lib/element'; import { history } from '@mantou/gem/lib/history'; @@ -88,6 +89,9 @@ const style = createCSSSheet(css` border-color: var(--bg); background: transparent; } + :host([borderless]) :where(.content, .dropdown) { + border-color: transparent; + } :host([color='normal']) { --bg: ${theme.primaryColor}; } @@ -135,12 +139,15 @@ const style = createCSSSheet(css` @adoptedStyle(focusStyle) @connectStore(icons) export class DuoyunButtonElement extends GemElement { + @slot static unnamed: string; + @attribute type: 'solid' | 'reverse'; @attribute color: StringList<'normal' | 'danger' | 'cancel'>; @boolattribute small: boolean; @boolattribute round: boolean; @boolattribute square: boolean; @boolattribute disabled: boolean; + @boolattribute borderless: boolean; @property dropdown?: ContextMenuItem[] | null; @property route?: RouteItem; diff --git a/packages/duoyun-ui/src/elements/card.ts b/packages/duoyun-ui/src/elements/card.ts index e202e95c..8fe869eb 100644 --- a/packages/duoyun-ui/src/elements/card.ts +++ b/packages/duoyun-ui/src/elements/card.ts @@ -103,6 +103,7 @@ export class DuoyunCardElement extends DuoyunLoadableBaseElement { @part static avatar: string; @slot static body: string; + @slot static unnamed: string; @slot static footer: string; @attribute avatar: string; diff --git a/packages/duoyun-ui/src/elements/collapse.ts b/packages/duoyun-ui/src/elements/collapse.ts index cecf6395..af68ab10 100644 --- a/packages/duoyun-ui/src/elements/collapse.ts +++ b/packages/duoyun-ui/src/elements/collapse.ts @@ -12,6 +12,7 @@ import { property, emitter, Emitter, + slot, } from '@mantou/gem/lib/decorators'; import { GemElement, TemplateResult, html, ifDefined } from '@mantou/gem/lib/element'; import { createCSSSheet, css, classMap, exportPartsMap } from '@mantou/gem/lib/utils'; @@ -85,6 +86,7 @@ export class DuoyunCollapsePanelElement extends GemElement { @emitter toggle: Emitter; + @slot static unnamed: string; @part static summary: string; @part static detail: string; diff --git a/packages/duoyun-ui/src/elements/copy.ts b/packages/duoyun-ui/src/elements/copy.ts index f196dad9..2414f159 100644 --- a/packages/duoyun-ui/src/elements/copy.ts +++ b/packages/duoyun-ui/src/elements/copy.ts @@ -89,6 +89,7 @@ type State = { @adoptedStyle(style) @adoptedStyle(focusStyle) export class DuoyunCopyElement extends GemElement { + @slot static unnamed: string; @slot static after: string; @boolattribute silent: boolean; diff --git a/packages/duoyun-ui/src/elements/drop-area.ts b/packages/duoyun-ui/src/elements/drop-area.ts index ff2d459a..b246a853 100644 --- a/packages/duoyun-ui/src/elements/drop-area.ts +++ b/packages/duoyun-ui/src/elements/drop-area.ts @@ -6,6 +6,7 @@ import { emitter, Emitter, state, + slot, } from '@mantou/gem/lib/decorators'; import { GemElement, html } from '@mantou/gem/lib/element'; import { createCSSSheet, css } from '@mantou/gem/lib/utils'; @@ -53,6 +54,8 @@ const style = createCSSSheet(css` @customElement('dy-drop-area') @adoptedStyle(style) export class DuoyunDropAreaElement extends GemElement { + @slot static unnamed: string; + @attribute tip: string; /**file type */ @attribute accept: string; diff --git a/packages/duoyun-ui/src/elements/file-picker.ts b/packages/duoyun-ui/src/elements/file-picker.ts index 6380cbf0..66f9e5b7 100644 --- a/packages/duoyun-ui/src/elements/file-picker.ts +++ b/packages/duoyun-ui/src/elements/file-picker.ts @@ -9,6 +9,7 @@ import { refobject, RefObject, part, + slot, } from '@mantou/gem/lib/decorators'; import { GemElement, html, repeat } from '@mantou/gem/lib/element'; import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils'; @@ -123,6 +124,8 @@ export class DuoyunFilePickElement extends GemElement implements BasePickerEleme @part static button: string; @part static item: string; + @slot static unnamed: string; + @attribute type: 'file' | 'image'; @attribute accept: string; /**@deprecated Use children*/ diff --git a/packages/duoyun-ui/src/elements/flow.ts b/packages/duoyun-ui/src/elements/flow.ts index 687221c0..9913501a 100644 --- a/packages/duoyun-ui/src/elements/flow.ts +++ b/packages/duoyun-ui/src/elements/flow.ts @@ -537,8 +537,8 @@ export class DuoyunFlowElement extends DuoyunResizeBaseElement { }); }; - #onCanvasResize = (evt: CustomEvent) => { - const { contentRect } = evt.detail; + #onCanvasResize = (evt: CustomEvent) => { + const { contentRect } = evt.target as DuoyunFlowCanvasElement; if (contentRect.width && contentRect.height && !this.loaded) { this.#setScale(contentRect); } @@ -608,7 +608,6 @@ export class DuoyunFlowElement extends DuoyunResizeBaseElement { .graph=${this.graph} .layout=${this.layout} > - `; }; } diff --git a/packages/duoyun-ui/src/elements/heading.ts b/packages/duoyun-ui/src/elements/heading.ts index 24200977..1e6f3447 100644 --- a/packages/duoyun-ui/src/elements/heading.ts +++ b/packages/duoyun-ui/src/elements/heading.ts @@ -1,4 +1,4 @@ -import { connectStore, adoptedStyle, customElement, attribute } from '@mantou/gem/lib/decorators'; +import { connectStore, adoptedStyle, customElement, attribute, slot } from '@mantou/gem/lib/decorators'; import { GemElement, html } from '@mantou/gem/lib/element'; import { history } from '@mantou/gem/lib/history'; import { createCSSSheet, css } from '@mantou/gem/lib/utils'; @@ -42,6 +42,8 @@ const style = createCSSSheet(css` @adoptedStyle(style) @connectStore(history.store) export class DuoyunHeadingElement extends GemElement { + @slot static unnamed: string; + @attribute lv: '1' | '2' | '3' | '4'; get #lv() { diff --git a/packages/duoyun-ui/src/elements/help-text.ts b/packages/duoyun-ui/src/elements/help-text.ts index 8214e742..b023940a 100644 --- a/packages/duoyun-ui/src/elements/help-text.ts +++ b/packages/duoyun-ui/src/elements/help-text.ts @@ -1,4 +1,4 @@ -import { adoptedStyle, customElement, attribute } from '@mantou/gem/lib/decorators'; +import { adoptedStyle, customElement, attribute, slot } from '@mantou/gem/lib/decorators'; import { GemElement, html } from '@mantou/gem/lib/element'; import { createCSSSheet, css } from '@mantou/gem/lib/utils'; @@ -19,6 +19,8 @@ const style = createCSSSheet(css` @customElement('dy-help-text') @adoptedStyle(style) export class DuoyunHelpTextElement extends GemElement { + @slot static unnamed: string; + @attribute status: 'default' | 'neutral' | 'positive' | 'negative'; get #status() { diff --git a/packages/duoyun-ui/src/elements/loading.ts b/packages/duoyun-ui/src/elements/loading.ts index d3e126a4..1567665a 100644 --- a/packages/duoyun-ui/src/elements/loading.ts +++ b/packages/duoyun-ui/src/elements/loading.ts @@ -1,4 +1,4 @@ -import { adoptedStyle, customElement } from '@mantou/gem/lib/decorators'; +import { adoptedStyle, customElement, slot } from '@mantou/gem/lib/decorators'; import { html } from '@mantou/gem/lib/element'; import { createCSSSheet, css } from '@mantou/gem/lib/utils'; @@ -29,6 +29,8 @@ const style = createCSSSheet(css` @customElement('dy-loading') @adoptedStyle(style) export class DuoyunLoadingElement extends DuoyunVisibleBaseElement { + @slot static unnamed: string; + render = () => { return html` diff --git a/packages/duoyun-ui/src/elements/more.ts b/packages/duoyun-ui/src/elements/more.ts index 1b2c57f5..b9250367 100644 --- a/packages/duoyun-ui/src/elements/more.ts +++ b/packages/duoyun-ui/src/elements/more.ts @@ -1,4 +1,12 @@ -import { adoptedStyle, customElement, attribute, emitter, Emitter, boolattribute } from '@mantou/gem/lib/decorators'; +import { + adoptedStyle, + customElement, + attribute, + emitter, + Emitter, + boolattribute, + slot, +} from '@mantou/gem/lib/decorators'; import { GemElement, html } from '@mantou/gem/lib/element'; import { classMap, createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils'; @@ -40,6 +48,8 @@ type State = { @customElement('dy-more') @adoptedStyle(style) export class DuoyunMoreElement extends GemElement { + @slot static unnamed: string; + @attribute maxheight: string; @attribute more: string; @attribute less: string; diff --git a/packages/duoyun-ui/src/elements/options.ts b/packages/duoyun-ui/src/elements/options.ts index 5a269fe3..a26fe287 100644 --- a/packages/duoyun-ui/src/elements/options.ts +++ b/packages/duoyun-ui/src/elements/options.ts @@ -1,4 +1,4 @@ -import { adoptedStyle, customElement, property, boolattribute } from '@mantou/gem/lib/decorators'; +import { adoptedStyle, customElement, property, boolattribute, slot } from '@mantou/gem/lib/decorators'; import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils'; @@ -151,6 +151,8 @@ type State = { @adoptedStyle(style) @adoptedStyle(focusStyle) export class DuoyunOptionsElement extends GemElement { + @slot static unnamed: string; + @boolattribute searchable: boolean; @property options?: Option[]; diff --git a/packages/duoyun-ui/src/elements/result.ts b/packages/duoyun-ui/src/elements/result.ts index 0d44190c..9f8b73e7 100644 --- a/packages/duoyun-ui/src/elements/result.ts +++ b/packages/duoyun-ui/src/elements/result.ts @@ -1,5 +1,5 @@ import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element'; -import { adoptedStyle, customElement, property, attribute } from '@mantou/gem/lib/decorators'; +import { adoptedStyle, customElement, property, attribute, slot } from '@mantou/gem/lib/decorators'; import { createCSSSheet, css } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -44,6 +44,8 @@ const style = createCSSSheet(css` @customElement('dy-result') @adoptedStyle(style) export class DuoyunResultElement extends GemElement { + @slot static unnamed: string; + @attribute status: Status; @property icon?: string | Element | DocumentFragment; diff --git a/packages/duoyun-ui/src/elements/segmented.ts b/packages/duoyun-ui/src/elements/segmented.ts index f93d86a6..bd51281c 100644 --- a/packages/duoyun-ui/src/elements/segmented.ts +++ b/packages/duoyun-ui/src/elements/segmented.ts @@ -28,9 +28,10 @@ const style = createCSSSheet(css` line-height: 1.2; border-radius: ${theme.normalRound}; background: ${theme.hoverBackgroundColor}; - --padding: 2px; + --padding: 3px; padding: var(--padding); gap: var(--padding); + --inner-radius: max(calc(${theme.normalRound} - var(--padding)), ${theme.smallRound}); } :host([small]) { font-size: 0.75em; @@ -49,7 +50,7 @@ const style = createCSSSheet(css` justify-content: center; gap: 0.3em; padding: calc(0.5em - var(--padding) + 1px) 1em; - border-radius: calc(${theme.normalRound} - 1px); + border-radius: var(--inner-radius); min-width: 5em; } :host(:where(:not([disabled], :where([data-animating], :state(animating))))) .segment:hover { @@ -80,7 +81,7 @@ const style = createCSSSheet(css` .marker { display: block; transition: inset 0.3s ${theme.timingFunction}; - border-radius: calc(${theme.normalRound} - 1px); + border-radius: var(--inner-radius); position: absolute; top: anchor(--anchor-0 top); bottom: anchor(--anchor-0 bottom); diff --git a/packages/duoyun-ui/src/elements/status-light.ts b/packages/duoyun-ui/src/elements/status-light.ts index c5d031d7..cf2120d4 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 } from '@mantou/gem/lib/decorators'; +import { adoptedStyle, customElement, attribute, slot } from '@mantou/gem/lib/decorators'; import { GemElement, html } from '@mantou/gem/lib/element'; import { createCSSSheet, css } from '@mantou/gem/lib/utils'; @@ -46,6 +46,8 @@ export function getStatusColor(status: Status) { @customElement('dy-status-light') @adoptedStyle(style) export class DuoyunStatusLightElement extends GemElement { + @slot static unnamed: string; + @attribute status: Status; constructor() { diff --git a/packages/duoyun-ui/src/elements/tag.ts b/packages/duoyun-ui/src/elements/tag.ts index 3e4ea51a..8cdacd3e 100644 --- a/packages/duoyun-ui/src/elements/tag.ts +++ b/packages/duoyun-ui/src/elements/tag.ts @@ -6,6 +6,7 @@ import { emitter, Emitter, boolattribute, + slot, } from '@mantou/gem/lib/decorators'; import { GemElement, html } from '@mantou/gem/lib/element'; import { createCSSSheet, css } from '@mantou/gem/lib/utils'; @@ -56,6 +57,8 @@ export type PresetColor = 'positive' | 'informative' | 'negative' | 'notice' | ' @adoptedStyle(focusStyle) @connectStore(icons) export class DuoyunTagElement extends GemElement { + @slot static unnamed: string; + @boolattribute closable: boolean; @attribute color: StringList; /**@deprecated */ diff --git a/packages/gem-devtools/src/scripts/get-gem.ts b/packages/gem-devtools/src/scripts/get-gem.ts index 453612b9..504d3152 100644 --- a/packages/gem-devtools/src/scripts/get-gem.ts +++ b/packages/gem-devtools/src/scripts/get-gem.ts @@ -61,6 +61,8 @@ export const getSelectedGem = function (data: PanelStore, gemElementSymbols: str } catch { // element prototype } + } else if (arg instanceof Node) { + return `${arg.nodeName} ${arg.nodeValue}`; } else if (window.CSSStyleSheet && arg instanceof CSSStyleSheet) { return arg.cssRules ? Array.from(arg.cssRules) @@ -156,21 +158,23 @@ export const getSelectedGem = function (data: PanelStore, gemElementSymbols: str }); }); tagClass.defineSlots?.forEach((slot) => { + const isUnnamed = slot === 'unnamed'; const prop = kebabToCamelCase(slot); if (!$0.constructor[prop]) { member.delete(prop); } const selector = `[slot=${slot}]`; - let element = $0.querySelector(selector); + let element = isUnnamed ? $0.firstChild : $0.querySelector(selector); if (element instanceof HTMLSlotElement) { // 只支持 inspect 第一个分配的元素 element = element.assignedElements()[0] || element; } + const isNode = element && !(element instanceof Element); data.slots.push({ name: slot, value: objectToString(element), type: element ? 'element' : 'null', - path: element ? ['querySelector', selector] : undefined, + path: isNode ? ['firstChild'] : element ? ['querySelector', selector] : undefined, }); }); tagClass.defineParts?.forEach((part) => { diff --git a/packages/gem-devtools/src/scripts/inspect-value.ts b/packages/gem-devtools/src/scripts/inspect-value.ts index f64e9994..05d1d913 100644 --- a/packages/gem-devtools/src/scripts/inspect-value.ts +++ b/packages/gem-devtools/src/scripts/inspect-value.ts @@ -4,7 +4,7 @@ declare function inspect(arg: any): void; export const inspectValue = (path: Path, token: string) => { const value = window.__GEM_DEVTOOLS__PRELOAD__.readProp(path); - if (value instanceof Element) { + if (value instanceof Element || value instanceof CharacterData) { let element = value; if (element instanceof HTMLSlotElement) { // 只支持 inspect 第一个分配的元素