Coralite v0.31.1 Released

Thomas David - 8 Apr 26

Coralite v0.31.1 is now available. This release introduces support for native slot projection behaviors in light DOM web components, ensuring consistency and preserving event listener and state integrity during updates.

Web components in Coralite run in the light DOM rather than the Shadow DOM. To achieve the composition benefits of the Shadow DOM, this release adds support for native slot projection. Light DOM components can now define <slot> elements in their templates and project child elements into them.

Coralite achieves this by extracting the component's initial child nodes during connectedCallback and storing them in memory. During the _render cycle, Coralite replaces the <slot> tags with these original nodes. This mirrors Shadow DOM slot projection behavior, including support for default fallback content, while keeping the elements within the light DOM.

Because the original DOM nodes are moved into memory and re-inserted during rendering, their internal state, selection state, and active event listeners are preserved across parent component re-renders.

Define a light DOM component with slot tags inside its render template:

  class InfoCard extends HTMLElement {
    _render() {
      this.innerHTML = `
        <div class="card">
          <header class="card-header">
            <slot name="title">Default Title</slot>
          </header>
          <section class="card-body">
            <slot></slot>
          </section>
        </div>
      `;
    }
  }

You can use the component by passing elements decorated with the slot attribute alongside default children:

  <info-card>
    <span>Project Update</span>
    <p>This content is projected into the default slot.</p>
  </info-card>

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

  npm install coralite@0.31.1

  npm install coralite-scripts@0.31.1