@rededor/cura-hydrate v0.4.4

Cura Design System Hydration App.

Provides Stencil hydrate app to server side rendering web components.

Install package npm install @rededor/cura-hydrate.

Usage example on node server:

import { renderToString } from '@rededor/cura-hydrate';

res.render(indexHtml, { ...options }, async function(err, html) {
  const result = await renderToString(html);
  res.send(result.html);
});

Shadow DOM

Hydrate app doesn't support shadow dom at the server level. The component DOM is exposed and the styles are injected by classes causing some styling divergences. To prevent that, make sure the your app don't set global styles for common tags or use some encapsulation strategy.

Note that this only happens for the server side rendering response. At the client level the shadow dom continues to work as expected.

Stencil Version: 3.3.0