Render on the server.
Hydrate in the browser.

Render

PHP functions in slogsdon/web-component-ssr read a template file, fill its slots with data, and print a placeholder element the browser can find again.

Hydrate

web-component-hydration finds those placeholders, replaces each one with a real custom element, and lets the element clone its template into an open shadow root.

Author

jsx-for-web-components provides the h() pragma function and a JSXCustomElement base class so a component's markup can be written as JSX. Its README labels it work in progress.

The three were built as a set: the PHP library's output is exactly the markup the hydration library looks for, and both use the same two attribute names (data-template and the template- element id prefix). Each piece is also usable alone, which is how they are documented here — three pages, one per tool.

Nothing here emits <template shadowrootmode>. Searching the three repositories at the revisions this site records — shadowrootmode, declarative — returns no matches in code, tests, or READMEs. The PHP renderer writes a <div data-template="…"> placeholder plus a separate <template id="template-…"> for the client; the shadow root is created by attachShadow({ mode: 'open' }) in a constructor, in the browser, after the script has loaded. The JSX library has a static-markup renderer, but it serialises an element's shadow children inline as light DOM rather than as a declarative shadow root.

So the server-rendered HTML is a placeholder a script replaces, not a shadow tree the browser adopts. If the script never runs, a reader sees the placeholder's copied children, not a styled component. That is the trade these tools were written to make, and this site does not claim more for them than that.

The code in all three is from 2018 and 2019: the JSX factory last changed on 2018-12-29 (1.2.1), the hydration library on 2019-08-06 (1.0.5), and the PHP library on 2019-08-06. Each repository has one later commit, dated 2026-05-08, which adds a homepage link and touches no code. Treat all three as published, unmaintained examples rather than as an actively developed framework, and treat the JSX library as the README itself labels it: WIP.

The PHP package is registered on Packagist as slogsdon/web-component-ssr with exactly one version, dev-master — there is no tagged release. Both JavaScript packages are on npm: web-component-hydration at 1.0.5 and jsx-for-web-components at 1.2.1. The three repositories are separate; none of them depends on another at install time.