feat: Added adopt-root-styles property for templated content

src/components/cell.ts

@@ -1,6 +1,7 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, type PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 import { cache } from 'lit/directives/cache.js';
+import { AdoptedStylesController } from '../controllers/root-styles.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_CELL_TAG } from '../internal/tags.js';
 import type { ColumnConfiguration, IgcCellContext, PropertyType } from '../internal/types.js';
@@ -21,6 +22,11 @@ export default class IgcGridLiteCell<T extends object> extends LitElement {
     registerComponent(IgcGridLiteCell);
   }
 
+  private readonly _adoptedStylesController = new AdoptedStylesController(this);
+
+  @property({ attribute: false })
+  public adoptRootStyles = false;
+
   /**
    * The value which will be rendered by the component.
    */
@@ -61,6 +67,16 @@ export default class IgcGridLiteCell<T extends object> extends LitElement {
     } as unknown as IgcCellContext<T>;
   }
 
+  protected override update(props: PropertyValues<this>): void {
+    if (props.has('adoptRootStyles')) {
+      this._adoptedStylesController.shouldAdoptStyles(
+        this.adoptRootStyles && this.cellTemplate != null
+      );
+    }
+
+    super.update(props);
+  }
+
   protected override render() {
     return html`${cache(
       this.cellTemplate

src/components/grid.ts

@@ -196,6 +196,9 @@ export class IgcGridLite<T extends object = any> extends EventEmitterBase<IgcGri
   @state()
   protected _dataState: T[] = [];
 
+  @property({ type: Boolean, reflect: true, attribute: 'adopt-root-styles' })
+  public adoptRootStyles = false;
+
   /** The data source for the grid. */
   @property({ attribute: false })
   public data: T[] = [];
@@ -455,6 +458,7 @@ export class IgcGridLite<T extends object = any> extends EventEmitterBase<IgcGri
         part="row"
         exportparts="cell"
         style=${styleMap(styles)}
+        .adoptRootStyles=${this.adoptRootStyles}
         .index=${index}
         .activeNode=${activeNode}
         .data=${item}
@@ -468,6 +472,7 @@ export class IgcGridLite<T extends object = any> extends EventEmitterBase<IgcGri
       <igc-grid-lite-header-row
         tabindex="0"
         style=${styleMap(this._domController.columnSizes)}
+        .adoptRootStyles=${this.adoptRootStyles}
         .columns=${this._stateController.columns}
       ></igc-grid-lite-header-row>
     `;

src/components/header-row.ts

@@ -1,7 +1,7 @@
 import { consume } from '@lit/context';
-import { html, LitElement, nothing, type PropertyValues } from 'lit';
+import { html, LitElement, type PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
-import { map } from 'lit/directives/map.js';
+import { repeat } from 'lit/directives/repeat.js';
 import type { StateController } from '../controllers/state.js';
 import { GRID_STATE_CONTEXT } from '../internal/context.js';
 import { getElementFromEventPath } from '../internal/element-from-event-path.js';
@@ -25,6 +25,9 @@ export default class IgcGridLiteHeaderRow<T extends object> extends LitElement {
   @consume({ context: GRID_STATE_CONTEXT, subscribe: true })
   private readonly _state?: StateController<T>;
 
+  @property({ attribute: false })
+  public adoptRootStyles = false;
+
   @property({ attribute: false })
   public columns: ColumnConfiguration<T>[] = [];
 
@@ -54,17 +57,21 @@ export default class IgcGridLiteHeaderRow<T extends object> extends LitElement {
 
   protected override render() {
     const filterRow = this._state?.filtering.filterRow;
+    const columns = this.columns.filter((column) => !column.hidden);
 
-    return html`${map(this.columns, (column) =>
-      column.hidden
-        ? nothing
-        : html`
-            <igc-grid-lite-header
-              part=${partMap({ filtered: column.field === filterRow?.column?.field })}
-              .column=${column}
-            ></igc-grid-lite-header>
-          `
-    )}`;
+    return html`
+      ${repeat(
+        columns,
+        (column) => column,
+        (column) => html`
+          <igc-grid-lite-header
+            part=${partMap({ filtered: column.field === filterRow?.column?.field })}
+            .adoptRootStyles=${this.adoptRootStyles}
+            .column=${column}
+          ></igc-grid-lite-header>
+        `
+      )}
+    `;
   }
 }
 

src/components/header.ts

@@ -3,8 +3,9 @@ import {
   θaddThemingController as addThemingController,
   IgcIconComponent,
 } from 'igniteui-webcomponents';
-import { html, LitElement, nothing } from 'lit';
+import { html, LitElement, nothing, type PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
+import { AdoptedStylesController } from '../controllers/root-styles.js';
 import type { StateController } from '../controllers/state.js';
 import {
   MIN_COL_RESIZE_WIDTH,
@@ -30,6 +31,8 @@ export default class IgcGridLiteHeader<T extends object> extends LitElement {
     registerComponent(IgcGridLiteHeader, IgcIconComponent);
   }
 
+  private readonly _adoptedStylesController = new AdoptedStylesController(this);
+
   protected get context(): IgcHeaderContext<T> {
     return {
       parent: this,
@@ -52,10 +55,32 @@ export default class IgcGridLiteHeader<T extends object> extends LitElement {
   @property({ attribute: false })
   public column!: ColumnConfiguration<T>;
 
+  @property({ attribute: false })
+  public adoptRootStyles = false;
+
   constructor() {
     super();
 
-    addThemingController(this, all);
+    addThemingController(this, all, {
+      themeChange: this._handleThemeChange,
+    });
+  }
+
+  protected override update(props: PropertyValues<this>): void {
+    if (props.has('adoptRootStyles')) {
+      this._adoptedStylesController.shouldAdoptStyles(
+        this.adoptRootStyles && this.column.headerTemplate != null
+      );
+    }
+
+    super.update(props);
+  }
+
+  private _handleThemeChange() {
+    AdoptedStylesController.invalidateCache(this.ownerDocument);
+    this._adoptedStylesController.shouldAdoptStyles(
+      this.adoptRootStyles && this.column.headerTemplate != null
+    );
   }
 
   #addResizeEventHandlers() {

src/components/row.ts

@@ -1,6 +1,6 @@
-import { html, LitElement, nothing } from 'lit';
+import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { map } from 'lit/directives/map.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_ROW_TAG } from '../internal/tags.js';
 import type { ActiveNode, ColumnConfiguration } from '../internal/types.js';
@@ -21,6 +21,9 @@ export default class IgcGridLiteRow<T extends object> extends LitElement {
     registerComponent(IgcGridLiteRow, IgcGridLiteCell);
   }
 
+  @property({ attribute: false })
+  public adoptRootStyles = false;
+
   @property({ attribute: false })
   public data?: T;
 
@@ -43,19 +46,24 @@ export default class IgcGridLiteRow<T extends object> extends LitElement {
     const { column: key, row: index } = this.activeNode ?? {};
     const data = this.data ?? ({} as T);
 
+    const columns = this.columns.filter((column) => !column.hidden);
+
     return html`
-      ${map(this.columns, (column) =>
-        column.hidden
-          ? nothing
-          : html`<igc-grid-lite-cell
-              part="cell"
-              .active=${key === column.field && index === this.index}
-              .column=${column}
-              .cellTemplate=${column.cellTemplate}
-              .row=${this as IgcGridLiteRow<T>}
-              .rowIndex=${this.index}
-              .value=${resolveFieldValue(data, column.field)}
-            ></igc-grid-lite-cell>`
+      ${repeat(
+        columns,
+        (column) => column,
+        (column) => html`
+          <igc-grid-lite-cell
+            part="cell"
+            .adoptRootStyles=${this.adoptRootStyles}
+            .active=${key === column.field && index === this.index}
+            .column=${column}
+            .cellTemplate=${column.cellTemplate}
+            .row=${this as IgcGridLiteRow<T>}
+            .rowIndex=${this.index}
+            .value=${resolveFieldValue(data, column.field)}
+          ></igc-grid-lite-cell>
+        `
       )}
     `;
   }

src/controllers/root-styles.ts

@@ -0,0 +1,95 @@
+import {
+  adoptStyles,
+  type LitElement,
+  type ReactiveController,
+  type ReactiveControllerHost,
+} from 'lit';
+
+export class AdoptedStylesController implements ReactiveController {
+  private static _cachedSheets = new WeakMap<Document, CSSStyleSheet[]>();
+
+  private readonly _host: ReactiveControllerHost & LitElement;
+  private _hasAdoptedStyles = false;
+
+  public get hasAdoptedStyles(): boolean {
+    return this._hasAdoptedStyles;
+  }
+
+  public static invalidateCache(owner?: Document): void {
+    AdoptedStylesController._cachedSheets.delete(owner ?? document);
+  }
+
+  public constructor(host: ReactiveControllerHost & LitElement) {
+    this._host = host;
+    host.addController(this);
+  }
+
+  public shouldAdoptStyles(condition: boolean): void {
+    condition ? this._adoptRootStyles() : this._clearAdoptedStyles();
+  }
+
+  /** @internal */
+  public hostDisconnected(): void {
+    this._clearAdoptedStyles();
+  }
+
+  private _adoptRootStyles(): void {
+    const ownerDocument = this._host.ownerDocument;
+
+    if (!AdoptedStylesController._cachedSheets.has(ownerDocument)) {
+      AdoptedStylesController._cachedSheets.set(
+        ownerDocument,
+        this._cloneDocumentStyleSheets(ownerDocument)
+      );
+    }
+
+    const ctor = this._host.constructor as typeof LitElement;
+    adoptStyles(this._host.shadowRoot!, [
+      ...ctor.elementStyles,
+      ...AdoptedStylesController._cachedSheets.get(ownerDocument)!,
+    ]);
+    this._hasAdoptedStyles = true;
+  }
+
+  private _cloneDocumentStyleSheets(ownerDocument: Document): CSSStyleSheet[] {
+    const sheets: CSSStyleSheet[] = [];
+
+    for (const sheet of ownerDocument.styleSheets) {
+      try {
+        const constructed = new CSSStyleSheet();
+        let hasRules = false;
+
+        for (const rule of sheet.cssRules) {
+          if (rule instanceof CSSImportRule) {
+            continue;
+          }
+
+          try {
+            constructed.insertRule(rule.cssText);
+            hasRules = true;
+          } catch {
+            // Ignore rules that can't be adopted.
+          }
+        }
+
+        if (hasRules) {
+          sheets.push(constructed);
+        }
+      } catch {
+        // Ignore stylesheets we can't access due to CORS.
+      }
+    }
+    return sheets;
+  }
+
+  private _clearAdoptedStyles(): void {
+    const shadowRoot = this._host.shadowRoot;
+    if (shadowRoot) {
+      shadowRoot.adoptedStyleSheets = shadowRoot.adoptedStyleSheets.filter(
+        (sheet) =>
+          !AdoptedStylesController._cachedSheets.get(this._host.ownerDocument)?.includes(sheet)
+      );
+    }
+    this._hasAdoptedStyles = false;
+  }
+}