[gem] Define render null behavior

Closed #210
mantou132 · Oct 23, 2024 · 6faf268 · 6faf268
1 parent 720b773
commit 6faf268
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 26 deletions.
diff --git a/packages/duoyun-ui/src/elements/avatar.ts b/packages/duoyun-ui/src/elements/avatar.ts
@@ -122,7 +122,7 @@ export class DuoyunAvatarElement extends GemElement {
 }
 
 const groupStyle = createCSSSheet(css`
-  :host(:where(:not([hidden]))) {
+  :scope:where(:not([hidden])) {
     display: flex;
   }
   .item:not(:first-child) {
@@ -163,7 +163,6 @@ export type AvatarItem = {
 @customElement('dy-avatar-group')
 @adoptedStyle(groupStyle)
 @aria({ role: 'list' })
-@shadow()
 export class DuoyunAvatarGroupElement extends GemElement {
   @part static avatar: string;
 

diff --git a/packages/duoyun-ui/src/elements/checkbox.ts b/packages/duoyun-ui/src/elements/checkbox.ts
@@ -118,7 +118,6 @@ export class DuoyunCheckboxElement extends GemElement {
  */
 @customElement('dy-checkbox-group')
 @adoptedStyle(groupStyle)
-@shadow({ delegatesFocus: true })
 @aria({ role: 'group' })
 export class DuoyunCheckboxGroupElement extends GemElement {
   @attribute orientation: 'horizontal' | 'vertical';

diff --git a/packages/duoyun-ui/src/elements/coach-mark.ts b/packages/duoyun-ui/src/elements/coach-mark.ts
@@ -17,7 +17,6 @@ import { createDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme, getSemanticColor } from '../lib/theme';
 import { locale } from '../lib/locale';
-import { noneTemplate } from '../lib/styles';
 
 import { ContextMenu } from './contextmenu';
 import { DuoyunVisibleBaseElement } from './base/visible';
@@ -224,7 +223,7 @@ export class DuoyunCoachMarkElement extends DuoyunVisibleBaseElement {
   #theme = () => ({ color: getSemanticColor(this.color) || this.color || theme.informativeColor });
 
   render = () => {
-    if (!this.#tour) return noneTemplate;
+    if (!this.#tour) return null;
     return html`
       <span class="ring"></span>
       <span class="ring"></span>

diff --git a/packages/duoyun-ui/src/elements/radio.ts b/packages/duoyun-ui/src/elements/radio.ts
@@ -98,15 +98,15 @@ export class DuoyunRadioElement extends GemElement {
 }
 
 export const groupStyle = createCSSSheet(css`
-  :host(:where(:not([hidden]))) {
+  :scope:where(:not([hidden])) {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
   }
-  :host(:not([orientation='vertical'])) {
+  :scope:not([orientation='vertical']) {
     gap: 1em;
   }
-  :host([orientation='vertical']) {
+  :scope[orientation='vertical'] {
     flex-direction: column;
     align-items: flex-start;
   }
@@ -123,7 +123,6 @@ export interface Option<T = any> {
  */
 @customElement('dy-radio-group')
 @adoptedStyle(groupStyle)
-@shadow({ delegatesFocus: true })
 @aria({ role: 'radiogroup' })
 export class DuoyunRadioGroupElement extends GemElement {
   @attribute orientation: 'horizontal' | 'vertical';

diff --git a/packages/duoyun-ui/src/lib/styles.ts b/packages/duoyun-ui/src/lib/styles.ts
@@ -33,17 +33,3 @@ export const blockContainer = createContainer('block');
 export const flexContainer = createContainer('flex');
 
 export const contentsContainer = createContainer('contents');
-
-/** render empty content */
-export const noneTemplate = html`
-  <style>
-    :host {
-      display: none !important;
-    }
-    @scope {
-      :scope {
-        display: none !important;
-      }
-    }
-  </style>
-`;
diff --git a/packages/gem/src/lib/element.ts b/packages/gem/src/lib/element.ts
@@ -218,6 +218,19 @@ function clearEffect(list: EffectItem<any>[]) {
 type Render = () => TemplateResult | null | undefined;
 type RenderItem = { render: Render; condition?: () => boolean };
 
+const nullTemplate = html`
+  <style>
+    :host {
+      display: none !important;
+    }
+    @scope {
+      :scope {
+        display: none !important;
+      }
+    }
+  </style>
+`;
+
 export let _createTemplate: (ele: GemElement, item: RenderItem) => void;
 
 export type Metadata = Partial<ShadowRootInit> & {
@@ -366,9 +379,10 @@ export abstract class GemElement extends HTMLElement {
 
   /**
    * - 条件渲染
-   * - 不提供 `render` 时显示子内容
-   * - 返回 `null` 时渲染空的子内容
+   * - 没有 `render` 时显示子内容
    * - 返回 `undefined` 时不会更新现有内容
+   * - 返回 `null` 时渲染空内容
+   * - 返回 html`` 时渲染空的子内容
    * */
   #render = (item?: RenderItem) => {
     try {
@@ -378,7 +392,7 @@ export abstract class GemElement extends HTMLElement {
       const temp = item ? item.render() : isLight ? undefined : html`<slot></slot>`;
       this.#rendering = false;
       if (temp === undefined) return;
-      render(temp, this.#renderRoot);
+      render(temp === null ? nullTemplate : temp, this.#renderRoot);
     } catch (err) {
       this.dispatchEvent(new CustomEvent(_RenderErrorEvent, { bubbles: true, composed: true, detail: err }));
       throw err;