Skip to content

feat(chat): Implemented reactive adoptRootStyles with dedicated controller#2093

Merged
damyanpetev merged 2 commits intomasterfrom
rkaraivanov/extract-adopt-styles-controller
Feb 13, 2026
Merged

feat(chat): Implemented reactive adoptRootStyles with dedicated controller#2093
damyanpetev merged 2 commits intomasterfrom
rkaraivanov/extract-adopt-styles-controller

Conversation

@rkaraivanov
Copy link
Member

Description

Added a new AdoptedStylesController that enables chat components to dynamically adopt document-level styles into Shadow DOM with proper lifecycle management.

Changes:

  • Created src/components/common/controllers/adopt-styles.ts

    • Reactive controller for managing document style adoption
    • Implements WeakMap-based caching per document for performance
    • Provides cache invalidation for theme changes
    • Handles cross-origin stylesheet restrictions gracefully
    • Automatic cleanup on component disconnection
  • Updated chat-input.ts and chat-message.ts

    • Migrated from inline controller to shared adopt-styles controller
    • Added reactive _shouldAdoptRootStyles state property
    • Implemented proper update() lifecycle to respond to option changes
    • Added cache invalidation on theme changes via _adoptPageStyles()
  • Enhanced chat.spec.ts

    • Added ResizeObserver loop error suppression for test stability
    • Added tests for dynamic adoptRootStyles toggling (false→true, true→false)
    • Added test for multiple toggle cycles
    • Added test for theme change interaction with adoptRootStyles
  • Updated types.ts

    • Removed outdated warning about runtime changes not working
  • Refactored chat/utils.ts

    • Removed duplicate AdoptedStylesController implementation
    • Controller moved to shared controllers directory

Benefits:

  • adoptRootStyles now works reactively at runtime (no longer one-time shot)
  • Consistent controller implementation across all components
  • Improved performance through stylesheet caching
  • Better memory management with automatic cleanup
  • Proper theme change handling with cache invalidation
  • Comprehensive test coverage for all scenarios

Type of Change

  • New feature (non-breaking change that adds functionality)

Testing

  • Enhanced chat.spec.ts
    • Added ResizeObserver loop error suppression for test stability
    • Added tests for dynamic adoptRootStyles toggling (false→true, true→false)
    • Added test for multiple toggle cycles
    • Added test for theme change interaction with adoptRootStyles

Checklist

  • My code follows the project's coding standards
  • I have tested my changes locally
  • I have updated documentation if needed

…oller

Added a new AdoptedStylesController that enables chat components to dynamically
adopt document-level styles into Shadow DOM with proper lifecycle management.

Changes:
- Created src/components/common/controllers/adopt-styles.ts
  * Reactive controller for managing document style adoption
  * Implements WeakMap-based caching per document for performance
  * Provides cache invalidation for theme changes
  * Handles cross-origin stylesheet restrictions gracefully
  * Automatic cleanup on component disconnection

- Updated chat-input.ts and chat-message.ts
  * Migrated from inline controller to shared adopt-styles controller
  * Added reactive _shouldAdoptRootStyles state property
  * Implemented proper update() lifecycle to respond to option changes
  * Added cache invalidation on theme changes via _adoptPageStyles()

- Enhanced chat.spec.ts
  * Added ResizeObserver loop error suppression for test stability
  * Added tests for dynamic adoptRootStyles toggling (false→true, true→false)
  * Added test for multiple toggle cycles
  * Added test for theme change interaction with adoptRootStyles

- Updated types.ts
  * Removed outdated warning about runtime changes not working

- Refactored chat/utils.ts
  * Removed duplicate AdoptedStylesController implementation
  * Controller moved to shared controllers directory

Benefits:
- adoptRootStyles now works reactively at runtime (no longer one-time shot)
- Consistent controller implementation across all components
- Improved performance through stylesheet caching
- Better memory management with automatic cleanup
- Proper theme change handling with cache invalidation
- Comprehensive test coverage for all scenarios
@damyanpetev damyanpetev merged commit d91e752 into master Feb 13, 2026
7 checks passed
@damyanpetev damyanpetev deleted the rkaraivanov/extract-adopt-styles-controller branch February 13, 2026 16:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants