feat(core): client hydrates data-webjs-prop-* attributes, then strips

Completes the SSR property-binding round-trip. The server emits
data-webjs-prop-<kebab>="<wire-encoded>" for each .prop=${val}
hole in PR-WIP commit 2c4c98e. This commit teaches WebComponent
to consume those attributes on the browser side.

At the top of connectedCallback (before lazy-hydration gating
and before _activate), the component scans its own attributes
for the data-webjs-prop- prefix. For each:
* decode via the same wire serializer used on the server (rich
  types like Date, Map, Set, BigInt, cycles)
* assign to the camelCase property (so the reactive accessor
  picks it up and triggers normal change-detection)
* removeAttribute() so the settled DOM has no framework cruft

One-time per element via a __webjsPropsHydrated guard, so
disconnect/reconnect cycles do not retry decode on attributes
that no longer exist. Malformed payloads warn once and are
skipped; the rest of the component continues to hydrate.

Net result for the user: writing .posts=${posts} in a parent
template just works through SSR, including on the first paint.
The DOM after hydration completes shows <post-list> with no
extra attributes.

Author: vivek7405

packages/core/src/component.js

@@ -1,6 +1,7 @@
 import { render as clientRender } from './render-client.js';
 import { isCSS, adoptStyles } from './css.js';
 import { register, tagOf } from './registry.js';
+import { parse as deserializeProp } from './serialize.js';
 import {
   captureAuthoredChildren,
   adoptSSRAssignments,
@@ -314,6 +315,19 @@ export class WebComponent extends Base {
 
   connectedCallback() {
     if (!isBrowser) return;
+
+    // Apply any `data-webjs-prop-*` attributes emitted by SSR. The server
+    // emits these for `.prop=${val}` bindings in parent templates so
+    // rich-typed values (Array, Object, Date, Map, Set, BigInt, cycles)
+    // round-trip through the rendered HTML. Once applied, the attributes
+    // are stripped so the settled DOM matches what the user would expect
+    // from the JS source: no framework artifacts left on the element.
+    // One-time per element. Subsequent reconnections do nothing.
+    if (!this.__webjsPropsHydrated) {
+      this.__webjsPropsHydrated = true;
+      this._hydratePropAttrs();
+    }
+
     const Ctor = /** @type any */ (this.constructor);
 
     // Selective hydration: defer activation until the element scrolls into
@@ -357,6 +371,39 @@ export class WebComponent extends Base {
    *
    * @private
    */
+  /**
+   * Read `data-webjs-prop-*` attributes (emitted by SSR for `.prop=${val}`
+   * bindings in parent templates), decode each via the wire serializer,
+   * assign the decoded value to the corresponding camelCase property on
+   * this instance, and remove the attribute from the DOM. After this
+   * runs, inspecting the element shows the same attributes the developer
+   * would expect from the JS source.
+   *
+   * @private
+   */
+  _hydratePropAttrs() {
+    /** @type {string[]} */
+    const names = [];
+    const attrs = this.attributes;
+    for (let i = 0; i < attrs.length; i++) {
+      const n = attrs[i].name;
+      if (n.startsWith('data-webjs-prop-')) names.push(n);
+    }
+    for (const fullName of names) {
+      const raw = this.getAttribute(fullName);
+      this.removeAttribute(fullName);
+      if (raw == null) continue;
+      const propName = camelCase(fullName.slice('data-webjs-prop-'.length));
+      try {
+        /** @type any */ (this)[propName] = deserializeProp(raw);
+      } catch (err) {
+        console.warn(
+          `[webjs] failed to decode ${fullName} on <${this.tagName.toLowerCase()}>: ${err && err.message}`
+        );
+      }
+    }
+  }
+
   _activate() {
     this._connected = true;
     const Ctor = /** @type any */ (this.constructor);