Current behavior
The SolidElement base class is inherited by all 59 components and includes several features that are only used by a handful of components:
dir and lang reactive properties (unused by any component; native HTML attributes still work)
token() method and animate.ts import (used by only 3 components: tag, video, audio)
onThemeChange lifecycle hook (used by only 2 components: icon, audio)
- CSS
@import for interactive.css, headline.css, paragraph.css (used by ~14 components)
This means every component carries the cost of these features in its bundle, even when unused.
Benefits
- Significantly reduced bundle size for consumers who import individual components
- Cleaner separation of concerns — features are opt-in rather than always included
- Better performance for end users
Technical Information
Removed rarely-used features from the SolidElement base class and moved them to opt-in modules:
- Removed
dir and lang reactive properties
- Moved
token() method and animate.ts import → standalone token() utility in src/internal/token.ts
- Moved
onThemeChange lifecycle hook → self-managed listeners in the 2 consuming components (icon, audio)
- Moved CSS
@import for interactive.css, headline.css, paragraph.css → importable modules in src/internal/shared-styles.ts (only added by the ~14 components that actually use them)
- Updated Storybook Vite config to process the new
shared-styles.ts file with Tailwind
What remains in SolidElement:
- Tailwind
--tw-* CSS variable resets (needed by all components)
box-sizing reset and [hidden] rule
emit() method (used by 20+ components)
DoR
DoD
Current behavior
The
SolidElementbase class is inherited by all 59 components and includes several features that are only used by a handful of components:dirandlangreactive properties (unused by any component; native HTML attributes still work)token()method andanimate.tsimport (used by only 3 components: tag, video, audio)onThemeChangelifecycle hook (used by only 2 components: icon, audio)@importforinteractive.css,headline.css,paragraph.css(used by ~14 components)This means every component carries the cost of these features in its bundle, even when unused.
Benefits
Technical Information
Removed rarely-used features from the
SolidElementbase class and moved them to opt-in modules:dirandlangreactive propertiestoken()method andanimate.tsimport → standalonetoken()utility insrc/internal/token.tsonThemeChangelifecycle hook → self-managed listeners in the 2 consuming components (icon, audio)@importforinteractive.css,headline.css,paragraph.css→ importable modules insrc/internal/shared-styles.ts(only added by the ~14 components that actually use them)shared-styles.tsfile with TailwindWhat remains in SolidElement:
--tw-*CSS variable resets (needed by all components)box-sizingreset and[hidden]ruleemit()method (used by 20+ components)DoR
DoD