中文
Open navigation

Declarative Shadow DOM Rendering

openElement treats Declarative Shadow DOM as the server-rendered boundary for Web Components, then upgrades only the behavior that must run in the browser.

Applies to v1.0.0-alpha.5 · Updated

The platform contract

Declarative Shadow DOM uses a template with shadowrootmode so HTML can carry shadow-root content before client JavaScript loads.

<my-card>
  <template shadowrootmode="open">
    <style>
    :host {
      display: block;
    }
    </style>
    <p>Visible before client JavaScript.</p>
  </template>
</my-card>

Traditional hydration

A client runtime often reconstructs the component tree before the page is fully interactive.

DSD-first rendering

The browser parses shadow roots from HTML. Custom Elements then upgrade existing hosts and attach only the needed behavior.

openElement layers

  • Static DSD components for content, layout, and documentation.
  • Interactive elements for local browser behavior.
  • Islands for client components that need framework runtimes.

Platform standards

OpenElement relies on web-platform contracts rather than a proprietary registry product. Custom Elements, DSD, CEM, Request/Response and FormData define the direction of the public application model.

Elements + DSD

Standard Custom Elements and Declarative Shadow DOM define the durable component boundary.

Request semantics

Request, Response and FormData are the basis of the current loader/action surfaces — application interaction without a proprietary transport.

Four-package ownership

Element, Router, Create and the experimental UI package are the current consumer surface; internal contracts stay internal.

See also

Documentation