Coralite v0.31.2 Released

Thomas David - 8 Apr 26

Coralite version 0.31.2 is now available. This patch release resolves issues with component reference mapping in nested environments, ensuring that custom web components preserve their internal element references correctly without parent components overriding them.

When rendering imperative web components, Coralite uses a reference mapping mechanism to locate elements marked with the ref attribute. Previously, using querySelectorAll('[ref]') matched all nested elements with a ref attribute, including those belonging to child custom components. This caused child custom components' internal references to be overridden, resulting in them evaluating to null when accessed via helpers.refs() within the child component.

To resolve this, version 0.31.2 introduces ancestor traversal for each matched ref element. The collector traverses ancestors up to the current component root. If any intermediate parent contains a hyphen (-) in its tag name—indicating a custom element boundary—the parent component safely skips processing that element to preserve the child's reference scope.

For example, in a nested template layout, inner references are now protected from being modified by the outer element:

  <div ref="parentContainer">
    <!-- Inner custom element whose internal refs are now safely isolated -->
    <custom-child></custom-child>
  </div>

This release also ensures that the correct web component ref attribute values are set during the compilation and rendering process, preventing mismatched or incorrect property bindings on elements.

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

  npm install coralite@0.31.2

  npm install coralite-scripts@0.31.2