refactor: Abstracted ShadowRoot options into a decorator (#1760)

Author: rkaraivanov

src/components/button-group/toggle-button.ts

@@ -3,6 +3,7 @@ import { property, query } from 'lit/decorators.js';
 
 import { themes } from '../../theming/theming-decorator.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
+import { shadowOptions } from '../common/decorators/shadow-options.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
 import { styles } from './themes/button.base.css.js';
@@ -20,15 +21,11 @@ import { styles as shared } from './themes/shared/button/button.common.css.js';
  * @csspart toggle - The native button element.
  */
 @themes(all)
+@shadowOptions({ delegatesFocus: true })
 export default class IgcToggleButtonComponent extends LitElement {
   public static override styles = [styles, shared];
   public static readonly tagName = 'igc-toggle-button';
 
-  public static override shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-
   /* blazorSuppress */
   public static register(): void {
     registerComponent(IgcToggleButtonComponent);

src/components/button/button-base.ts

@@ -4,6 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
+import { shadowOptions } from '../common/decorators/shadow-options.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common//mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
@@ -17,17 +18,13 @@ export interface IgcButtonEventMap {
 }
 
 @blazorDeepImport
+@shadowOptions({ delegatesFocus: true })
 export abstract class IgcButtonBaseComponent extends EventEmitterMixin<
   IgcButtonEventMap,
   Constructor<LitElement>
 >(LitElement) {
   public static readonly formAssociated = true;
 
-  protected static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-
   protected readonly _internals = addInternalsController(this);
   private readonly _focusRingManager = addKeyboardFocusRing(this);
 

src/components/common/decorators/shadow-options.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+
+/**
+ * TypeScript decorator that allows customizing the Shadow DOM options for a LitElement component.
+ *
+ * This decorator merges the provided `options` with LitElement's default `shadowRootOptions`,
+ * providing a convenient way to configure the Shadow DOM, such as its `mode` (e.g., 'open' or 'closed')
+ * or `delegatesFocus` property.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options
+ */
+export function shadowOptions(
+  options: Partial<ShadowRootInit>
+): (proto: unknown) => void {
+  return (proto: unknown) => {
+    (proto as typeof LitElement).shadowRootOptions = {
+      ...LitElement.shadowRootOptions,
+      ...options,
+    };
+  };
+}

src/components/date-picker/date-picker.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, nothing, type TemplateResult } from 'lit';
+import { html, nothing, type TemplateResult } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
@@ -20,6 +20,7 @@ import {
   escapeKey,
 } from '../common/controllers/key-bindings.js';
 import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
+import { shadowOptions } from '../common/decorators/shadow-options.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import {
@@ -150,6 +151,7 @@ export interface IgcDatePickerComponentEventMap {
 @blazorAdditionalDependencies(
   'IgcCalendarComponent, IgcDateTimeInputComponent, IgcDialogComponent, IgcIconComponent'
 )
+@shadowOptions({ delegatesFocus: true })
 export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   EventEmitterMixin<
     IgcDatePickerComponentEventMap,
@@ -159,11 +161,6 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   public static readonly tagName = 'igc-date-picker';
   public static styles = [styles, shared];
 
-  protected static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-
   /* blazorSuppress */
   public static register(): void {
     registerComponent(

src/components/date-range-picker/date-range-picker.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, nothing, type TemplateResult } from 'lit';
+import { html, nothing, type TemplateResult } from 'lit';
 import {
   property,
   query,
@@ -25,6 +25,7 @@ import {
   escapeKey,
 } from '../common/controllers/key-bindings.js';
 import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
+import { shadowOptions } from '../common/decorators/shadow-options.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { IgcDateRangePickerResourceStringsEN } from '../common/i18n/date-range-picker.resources.js';
@@ -179,6 +180,7 @@ export interface IgcDateRangePickerComponentEventMap {
 @blazorAdditionalDependencies(
   'IgcCalendarComponent, IgcDateTimeInputComponent, IgcDialogComponent, IgcIconComponent, IgcChipComponent, IgcInputComponent'
 )
+@shadowOptions({ delegatesFocus: true })
 export default class IgcDateRangePickerComponent extends FormAssociatedRequiredMixin(
   EventEmitterMixin<
     IgcDateRangePickerComponentEventMap,
@@ -188,11 +190,6 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   public static readonly tagName = 'igc-date-range-picker';
   public static styles = [styles, shared];
 
-  protected static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-
   /* blazorSuppress */
   public static register(): void {
     registerComponent(

src/components/input/input-base.ts

@@ -3,6 +3,7 @@ import { property, query, queryAssignedElements } from 'lit/decorators.js';
 
 import { getThemeController, themes } from '../../theming/theming-decorator.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
+import { shadowOptions } from '../common/decorators/shadow-options.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
@@ -28,16 +29,12 @@ export interface IgcInputComponentEventMap {
 
 @blazorDeepImport
 @themes(all, { exposeController: true })
+@shadowOptions({ delegatesFocus: true })
 export abstract class IgcInputBaseComponent extends FormAssociatedRequiredMixin(
   EventEmitterMixin<IgcInputComponentEventMap, Constructor<LitElement>>(
     LitElement
   )
 ) {
-  protected static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-
   public static styles = [styles, shared];
   private static readonly increment = createCounter();
 

src/components/textarea/textarea.ts

@@ -11,6 +11,7 @@ import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 import { getThemeController, themes } from '../../theming/theming-decorator.js';
 import { createResizeObserverController } from '../common/controllers/resize-observer.js';
+import { shadowOptions } from '../common/decorators/shadow-options.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
@@ -76,6 +77,7 @@ export interface IgcTextareaComponentEventMap {
  * @csspart helper-text - The helper text wrapper of the igc-textarea.
  */
 @themes(all, { exposeController: true })
+@shadowOptions({ delegatesFocus: true })
 export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
   EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>(
     LitElement
@@ -89,11 +91,6 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
     registerComponent(IgcTextareaComponent, IgcValidationContainerComponent);
   }
 
-  protected static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-
   //#region Private properties and state
 
   private static readonly increment = createCounter();

src/components/tile-manager/tile-manager.ts

@@ -12,6 +12,7 @@ import {
   createMutationController,
   type MutationControllerParams,
 } from '../common/controllers/mutation-observer.js';
+import { shadowOptions } from '../common/decorators/shadow-options.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
 import { asNumber } from '../common/util.js';
@@ -40,15 +41,11 @@ import IgcTileComponent from './tile.js';
  *
  */
 @themes(all)
+@shadowOptions({ slotAssignment: 'manual' })
 export default class IgcTileManagerComponent extends LitElement {
   public static readonly tagName = 'igc-tile-manager';
   public static override styles = [styles, shared];
 
-  public static override shadowRootOptions: ShadowRootInit = {
-    mode: 'open',
-    slotAssignment: 'manual',
-  };
-
   /* blazorSuppress */
   public static register() {
     registerComponent(IgcTileManagerComponent, IgcTileComponent);