Coralite v0.31.0 Released

Thomas David - 8 Apr 26

Coralite v0.31.0 is now available. This release primarily focuses on styling robustness, addressing scoping vulnerabilities in Light DOM environments, fixing style encapsulation for dynamically generated component wrappers, and correcting syntax issues in our script fallback compilation pipeline.

When web components were moved to the Light DOM, their encapsulated CSS logic (defined in this._styles) became susceptible to leaking into the global document scope. To solve this, Coralite now processes raw CSS through transformCss to append the appropriate scoped selectors before generating the component client bundle. The client wrapper rendering logic has also been updated to output the correct data-style-selector attributes to the generated root HTML tags.

During imperative client-side web component wrapper generation, the injected component CSS was previously not scoped with the component's generated data-style-selector attribute. This caused styling to leak or mismatch in some configurations.

This update wraps the raw CSS provided by module.default.styles with [data-style-selector="${this.componentId}"] inside the dynamically inserted <style> tag, leveraging native CSS nesting for scoped application. This aligns its behavior with declarative server-side compilation. A new E2E test suite (scoped-style.test.js) has been added with corresponding fixtures to verify this behavior.

We fixed a bug where esbuild hooks in script-manager.js could produce invalid syntax (such as export default export default function(){};) when encountering fallback scripts. We changed the fallback string from 'export default function(){}' to 'function(){}' in both coralite.js and utils.js, and updated the string matching checks in script-manager.js to correctly identify the revised fallback format.

To upgrade to the latest version, update your project dependencies:

  npm install coralite@0.31.0

  npm install coralite-scripts@0.31.0