@webjsdev/core 0.7.45 → 0.7.47

package/src/render-server.js

@@ -1,6 +1,14 @@
 import { html, isTemplate } from './html.js';
 import { BINDING_PREFIXES } from './binding-prefixes.js';
 import { escapeText, escapeAttr } from './escape.js';
+import {
+  assertNotFunctionActionAttr, assertNotFunctionReflectedActionProp,
+  assertIdentifiableAction, bindFormActionStartTag, isBoundFormAction, resolveFormActionId,
+  assertConvergentBoundForm, assertSubmitterHasNoName, assertSubmitterHasNoValue,
+  assertSubmitterFormIsBound, assertSubmitterHasNoFormAttribute,
+  assertSingleSubmitterAction, assertSubmitterStartTag, parseStartTagAttrs,
+  isSubmitterReflectedProp, FORM_ACTION_FIELD,
+} from './form-action.js';
 import { lookup, lookupModuleUrl, allTags } from './registry.js';
 import { stylesToString, isCSS } from './css.js';
 import { isRepeat } from './repeat.js';
@@ -23,10 +31,19 @@ import { cspNonce } from './csp-nonce.js';
  * Suspense still works but we fall back to emitting only the fallback
  * (the promise is dropped: appropriate for static pre-render).
  *
- * @typedef {{ pending: {id: string, promise: Promise<unknown>}[], nextId: number }} SuspenseCtx
+ * @typedef {{ pending: {id: string, promise: Promise<unknown>, formScope?: 'none'|'unbound'|'bound'|'unknown'}[], nextId: number }} SuspenseCtx
+ *
+ * `formScope` (#1207) is how a caller that resolves a Suspense boundary ITSELF
+ * tells this render what the boundary's surroundings were. The page pipeline in
+ * `@webjsdev/server` drains `ctx.pending` and re-renders each resolved child
+ * through here, which is a fresh scan with no view of the shell it belongs to,
+ * so without the recorded scope a `<button formaction=${fn}>` inside a bound
+ * form's Suspense boundary reads as form-less and is refused. That refusal is
+ * caught and replaced by the empty string in production, so the whole boundary
+ * would silently disappear from a page that still returned 200.
  *
  * @param {unknown} value
- * @param {{ ssr?: boolean, suspenseCtx?: SuspenseCtx }} [opts]
+ * @param {{ ssr?: boolean, suspenseCtx?: SuspenseCtx, dev?: boolean, formScope?: 'none'|'unbound'|'bound'|'unknown' }} [opts]
  * @returns {Promise<string>}
  */
 export async function renderToString(value, opts = { ssr: true }) {
@@ -37,20 +54,23 @@ export async function renderToString(value, opts = { ssr: true }) {
   // sharing it see the same flag. Undefined stays undefined (NODE_ENV fallback).
   const dev = opts && opts.dev !== undefined ? opts.dev : ctx && ctx.dev;
   if (ctx && ctx.dev === undefined && dev !== undefined) ctx.dev = dev;
-  const html = await render(value, ctx);
+  // A caller that knows the scope passes it. Absent, this is a top-level render
+  // and 'none' is the honest answer: there is conclusively no enclosing form.
+  const html = await render(value, ctx, (opts && opts.formScope) || 'none');
   return opts && opts.ssr === false ? html : await injectDSD(html, ctx, [], dev);
 }
 
 /**
  * @param {unknown} value
  * @param {SuspenseCtx} [ctx]
+ * @param {'none'|'unbound'|'bound'|'unknown'} [formScope] enclosing form scope, as seen from THIS scan
  * @returns {Promise<string>}
  */
-async function render(value, ctx) {
+async function render(value, ctx, formScope = 'none') {
   if (value == null || value === false || value === true) return '';
   if (value && typeof /** @type any */ (value).then === 'function') {
     value = await value;
-    return render(value, ctx);
+    return render(value, ctx, formScope);
   }
   // unsafeHTML: inject raw HTML string without escaping.
   if (isUnsafeHTML(value)) {
@@ -58,21 +78,21 @@ async function render(value, ctx) {
   }
   // live() on the server just unwraps and renders the inner value.
   if (isLive(value)) {
-    return render(/** @type any */ (value).value, ctx);
+    return render(/** @type any */ (value).value, ctx, formScope);
   }
   // watch() on the server reads the signal once and inlines the
   // result. Subscription is a client-only concern; the SSR HTML
   // freezes a snapshot of the current value.
   if (isWatch(value)) {
-    return render(/** @type any */ (value).signal.get(), ctx);
+    return render(/** @type any */ (value).signal.get(), ctx, formScope);
   }
   // keyed() on the server: render the wrapped template; key is client-only.
   if (isKeyed(value)) {
-    return render(/** @type any */ (value).value, ctx);
+    return render(/** @type any */ (value).value, ctx, formScope);
   }
   // guard() on the server: always invoke the value function (no cache on SSR).
   if (isGuard(value)) {
-    return render(/** @type any */ (value).fn(), ctx);
+    return render(/** @type any */ (value).fn(), ctx, formScope);
   }
   // templateContent() on the server: emit the template's innerHTML verbatim.
   if (isTemplateContent(value)) {
@@ -85,7 +105,7 @@ async function render(value, ctx) {
   }
   // cache() on the server: pass-through to the inner value.
   if (isCache(value)) {
-    return render(/** @type any */ (value).value, ctx);
+    return render(/** @type any */ (value).value, ctx, formScope);
   }
   // until() on the server: render the first synchronous candidate, or
   // await the first Promise to settle when all candidates are Promises.
@@ -95,13 +115,13 @@ async function render(value, ctx) {
     const args = /** @type any */ (value).args;
     for (const a of args) {
       if (!a || typeof (/** @type any */ (a).then) !== 'function') {
-        return render(a, ctx);
+        return render(a, ctx, formScope);
       }
     }
     if (args.length > 0) {
       try {
         const winner = await Promise.race(args.map((p) => Promise.resolve(p).catch(() => undefined)));
-        return render(winner, ctx);
+        return render(winner, ctx, formScope);
       } catch {
         return '';
       }
@@ -114,34 +134,35 @@ async function render(value, ctx) {
     return '';
   }
   if (Array.isArray(value)) {
-    const parts = await Promise.all(value.map((v) => render(v, ctx)));
+    const parts = await Promise.all(value.map((v) => render(v, ctx, formScope)));
     return parts.join('');
   }
   if (isRepeat(value)) {
     const r = /** @type any */ (value);
-    const parts = await Promise.all(r.items.map((it, i) => render(r.templateFn(it, i), ctx)));
+    const parts = await Promise.all(r.items.map((it, i) => render(r.templateFn(it, i), ctx, formScope)));
     return parts.join('');
   }
   if (isSuspense(value)) {
     const s = /** @type any */ (value);
-    const fallback = await render(s.fallback, ctx);
+    const fallback = await render(s.fallback, ctx, formScope);
     if (ctx) {
       const id = `s${ctx.nextId++}`;
-      ctx.pending.push({ id, promise: Promise.resolve(s.children) });
+      ctx.pending.push({ id, promise: Promise.resolve(s.children), formScope });
       return `<webjs-boundary id="${id}">${fallback}</webjs-boundary>`;
     }
     return fallback;
   }
-  if (isTemplate(value)) return renderTemplate(/** @type any */ (value), ctx);
+  if (isTemplate(value)) return renderTemplate(/** @type any */ (value), ctx, formScope);
   return escapeText(String(value));
 }
 
 /**
  * @param {import('./html.js').TemplateResult} tr
  * @param {SuspenseCtx} [ctx]
+ * @param {'none'|'unbound'|'bound'|'unknown'} [formScopeAtStart]
  * @returns {Promise<string>}
  */
-async function renderTemplate(tr, ctx) {
+async function renderTemplate(tr, ctx, formScopeAtStart = 'none') {
   const { strings, values } = tr;
   let out = '';
   let state = 'text';
@@ -151,6 +172,135 @@ async function renderTemplate(tr, ctx) {
   let commentDashes = 0;
   let currentTag = '';   // lowercased tag name currently being parsed
   let rawTail = '';      // rolling lowercased tail, tracks </script>/</style>
+  let tagStart = -1;     // index in `out` of the `<` opening the current tag
+  /** @type {string | null} */
+  let pendingActionId = null;  // identity of a bound form action, until the tag closes
+  /** @type {string | null} */
+  let pendingSubmitterTag = null;  // tag of a bound submitter, until it closes
+  // Shapes on the CURRENT start tag that a bound form may not carry (#1155).
+  // Collected as the tag is scanned and judged at its `>`, because the action
+  // hole may come after them.
+  let pendingActionCount = 0;
+  /** @type {string[]} */
+  let pendingPropAttrs = [];
+  /** @type {string[]} */
+  let pendingSubmitterProps = [];
+  // Whether the tag stream is currently inside a form that BOUND an action
+  // (#1207), as THIS scan can see it. Three states, and the third is the point:
+  //   'bound'   an enclosing <form> opened here and bound an action
+  //   'unbound' an enclosing <form> opened here and bound nothing
+  //   'none'    there is conclusively no enclosing <form>
+  //   'unknown' there may be one, but this scan cannot see it
+  //
+  // The last two look alike and must not be merged, which is what a boolean did.
+  // A component's template is rendered by a SEPARATE pass (`injectDSD` calls
+  // `render` on it), so a `<button formaction=${fn}>` inside a component inside
+  // a bound form read as "no form", was refused, and in production vanished
+  // from a page that still returned 200. That pass now says 'unknown' and the
+  // boundness question is skipped, exactly as the client skips it when it
+  // cannot reach the form, so both renderers are best effort in the same place
+  // and for the same reason. A top-level scan that simply contains no form
+  // stays 'none' and is still refused, because there the answer IS known.
+  //
+  // Seeded from the caller so a nested template rendered into a form's children
+  // inherits the scope, since each template is its own scan.
+  let formScope = formScopeAtStart;
+  let isCloseTag = false;
+
+  // A bound `action=${fn}` is committed at its hole, but the edits it implies
+  // (forcing `method` / `enctype`, and the hidden identity field) are only
+  // possible once the whole start tag is known: an attribute the author wrote
+  // AFTER the action hole still counts, and the hidden field belongs INSIDE
+  // the form, after the `>`. So the hole records the identity and this runs at
+  // the `>`, rewriting the start tag that was just emitted.
+  const closeBoundFormTag = () => {
+    // Reset per tag whether or not this one was bound, so a later form is never
+    // judged on an earlier tag's shapes.
+    const propAttrs = pendingPropAttrs;
+    const submitterProps = pendingSubmitterProps;
+    const duplicateAction = pendingActionCount > 1;
+    const submitterTag = pendingSubmitterTag;
+    pendingPropAttrs = [];
+    pendingSubmitterProps = [];
+    pendingActionCount = 0;
+    pendingSubmitterTag = null;
+    if (pendingActionId != null) {
+      assertConvergentBoundForm({ duplicateAction, propAttrs });
+      const bound = bindFormActionStartTag(out.slice(tagStart), pendingActionId);
+      out = out.slice(0, tagStart) + bound.tag + bound.hidden;
+      pendingActionId = null;
+      formScope = 'bound';
+    }
+    // A form that opened and bound NOTHING still opens a scope: a submitter
+    // inside it must be refused, which is a different answer from 'none'.
+    if (!isCloseTag && currentTag === 'form' && formScope !== 'bound') formScope = 'unbound';
+    if (submitterTag != null) {
+      assertSubmitterStartTag(out.slice(tagStart), submitterTag, { bound: true, duplicateAction, propAttrs: submitterProps });
+    } else if (formScope === 'bound' && !isCloseTag && (currentTag === 'button' || currentTag === 'input')) {
+      // Part B (#1207): an ordinary submitter inside a bound form, whose own
+      // `formmethod` / `formenctype` can defeat the binding without carrying an
+      // action of its own. Neither renderer used to look at those. Gated on
+      // 'bound' because that is the only scope in which the sweep has anything
+      // to protect: under 'unknown' the enclosing form is not this scan's to
+      // judge, and under 'none' / 'unbound' there is no binding to defeat.
+      assertSubmitterStartTag(out.slice(tagStart), currentTag, { bound: false, propAttrs: submitterProps });
+    }
+  };
+  // #1155: a `.method` / `.enctype` / `.encoding` prop on a form is dropped
+  // here but applied for real in the browser, where all three are reflected IDL
+  // attributes, so a bound form carrying one submits differently with JS than
+  // without it. Recorded and refused at the `>`, once the tag's action hole is
+  // known.
+  const notePropAttr = (name, tag) => {
+    const t = String(tag).toLowerCase();
+    if (t === 'button' || t === 'input') {
+      // #1207: the submitter twin. `name` / `value` / `formAction` / `formMethod`
+      // / `formEnctype` all reflect on a submitter, so a `.prop` spelling is
+      // dropped here and written to the attribute in the browser.
+      if (isSubmitterReflectedProp(name)) pendingSubmitterProps.push(String(name));
+      return;
+    }
+    if (t !== 'form') return;
+    let n = String(name).toLowerCase();
+    if (n === 'encoding') n = 'enctype';
+    if (n === 'method' || n === 'enctype') pendingPropAttrs.push(String(name));
+  };
+  const noteActionHole = (name, tag) => {
+    const t = String(tag).toLowerCase();
+    const n = String(name).toLowerCase();
+    if ((t === 'form' && n === 'action') ||
+        ((t === 'button' || t === 'input') && n === 'formaction')) {
+      pendingActionCount += 1;
+    }
+  };
+
+  // Every `>` in a tag state funnels through here, so the bound-form bookkeeping
+  // stays in one place rather than at five call sites. `</form>` closes the form
+  // scope: a submitter after it is outside.
+  //
+  // `allowRawtext` is NOT a preference. Only two of those five call sites ever
+  // entered rawtext: the `tag-name` and `in-tag` exits. The three attribute
+  // exits (`attr-name`, `after-eq`, `attr-unquoted`) always forced `text`, so
+  // `<script defer>` and `<style media=print>`, whose start tags end on a bare
+  // or unquoted attribute, escaped their bodies. Switching them to rawtext here
+  // would silently turn `<script defer>${userInput}</script>` from escaped into
+  // raw script, which is an XSS mitigation this change has no business
+  // touching. Whether that escaping is the RIGHT behaviour is a separate
+  // question from #1207; this preserves it exactly.
+  const handleTagEnd = (allowRawtext) => {
+    closeBoundFormTag();
+    if (isCloseTag && currentTag === 'form') {
+      // Back to the scope this scan STARTED in, not a flat 'none'. Under an
+      // 'unknown' seed (the component pass) the scan never learned whether the
+      // host page has a bound form, and closing a form of its own teaches it
+      // nothing about that, so asserting 'none' here would downgrade a
+      // cannot-tell into a conclusive refusal.
+      formScope = formScopeAtStart === 'unknown' ? 'unknown' : 'none';
+    }
+    isCloseTag = false;
+    state = allowRawtext && isRawtextTag(currentTag) ? 'rawtext' : 'text';
+    if (state === 'rawtext') rawTail = '';
+  };
 
   for (let i = 0; i < strings.length; i++) {
     const s = strings[i];
@@ -159,12 +309,12 @@ async function renderTemplate(tr, ctx) {
       switch (state) {
         case 'text':
           out += c;
-          if (c === '<') state = 'tag-open';
+          if (c === '<') { state = 'tag-open'; tagStart = out.length - 1; isCloseTag = false; }
           break;
         case 'tag-open':
           out += c;
           if (c === '!') state = 'bang-1';
-          else if (c === '/') { state = 'tag-name'; currentTag = ''; }
+          else if (c === '/') { state = 'tag-name'; currentTag = ''; isCloseTag = true; }
           else if (/[a-zA-Z]/.test(c)) { state = 'tag-name'; currentTag = c.toLowerCase(); }
           else state = 'text';
           break;
@@ -186,16 +336,14 @@ async function renderTemplate(tr, ctx) {
         case 'tag-name':
           out += c;
           if (c === '>') {
-            state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
-            if (state === 'rawtext') rawTail = '';
+            handleTagEnd(true);
           } else if (/\s/.test(c)) state = 'in-tag';
           else currentTag += c.toLowerCase();
           break;
         case 'in-tag':
           out += c;
           if (c === '>') {
-            state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
-            if (state === 'rawtext') rawTail = '';
+            handleTagEnd(true);
           } else if (!/\s/.test(c) && c !== '/') {
             state = 'attr-name';
             attrName = c;
@@ -214,18 +362,18 @@ async function renderTemplate(tr, ctx) {
         case 'attr-name':
           if (c === '=') { state = 'after-eq'; out += c; }
           else if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; out += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; out += c; }
+          else if (c === '>') { state = 'text'; attrName = ''; out += c; handleTagEnd(false); }
           else { attrName += c; out += c; }
           break;
         case 'after-eq':
           if (c === '"' || c === "'") { state = 'attr-quoted'; attrQuote = c; out += c; }
           else if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; out += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; out += c; }
+          else if (c === '>') { state = 'text'; attrName = ''; out += c; handleTagEnd(false); }
           else { state = 'attr-unquoted'; out += c; }
           break;
         case 'attr-unquoted':
           if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; out += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; out += c; }
+          else if (c === '>') { state = 'text'; attrName = ''; out += c; handleTagEnd(false); }
           else out += c;
           break;
         case 'attr-quoted':
@@ -253,7 +401,7 @@ async function renderTemplate(tr, ctx) {
         out += String(val ?? '');
         rawTail = '';
       } else if (state === 'text') {
-        out += await render(val, ctx);
+        out += await render(val, ctx, formScope);
       } else if (state === 'after-eq') {
         const prefix = attrName[0];
         const name = attrName.slice(1);
@@ -282,13 +430,25 @@ async function renderTemplate(tr, ctx) {
           // fallback to HTML now and carry it as data-webjs-fallback, which the
           // injectDSD streaming pre-pass reads as the boundary placeholder.
           if (currentTag === 'webjs-suspense' && name === 'fallback') {
-            const fbHtml = await render(val, ctx);
+            const fbHtml = await render(val, ctx, formScope);
             out += `data-webjs-fallback="${escapeAttr(fbHtml)}"`;
             state = 'in-tag';
             attrName = '';
             continue;
           }
           if (!currentTag.includes('-')) {
+            // A native element's `.prop` is dropped at SSR, so this path never
+            // leaked here. It still refuses a function where the property is a
+            // REFLECTED IDL attribute (`.action` on a form, `.formAction` on a
+            // button or input), so the rule does not depend on which renderer
+            // sees it first: the client sets that property for real and the
+            // reflection writes the source into the DOM. A page that renders
+            // clean on the server and throws on hydration is a worse failure
+            // than one that refuses at the earliest point. Elsewhere the
+            // property is a plain expando that reflects nothing, so refusing
+            // it would be a false positive.
+            assertNotFunctionReflectedActionProp(val, name, currentTag);
+            notePropAttr(name, currentTag);
             state = 'in-tag';
             attrName = '';
             continue;
@@ -318,16 +478,74 @@ async function renderTemplate(tr, ctx) {
           state = 'in-tag';
           attrName = '';
         } else if (kind === 'bool') {
+          // Never leaked (a boolean binding stringifies nothing), but
+          // `?action=${fn}` is meaningless in every case and refusing it keeps
+          // the rule true for every sigil rather than only the quoted ones.
+          assertNotFunctionActionAttr(val, name, currentTag);
           out = out.slice(0, attrStart);
           if (val) out += `${name}=""`;
           state = 'in-tag';
           attrName = '';
+        } else if (isBoundFormAction(val, attrName, currentTag)) {
+          noteActionHole(attrName, currentTag);
+          if (currentTag === 'form') {
+            // #1155: the form-level binding. Drop the `action=` attribute
+            // entirely so the form posts to the page's own url (an omitted
+            // attribute, not `action=""`, which the spec calls a conformance
+            // error), and remember the identity so the `>` can force the
+            // submission attributes and emit the hidden field.
+            pendingActionId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
+            // Trailing whitespace goes with the attribute: every injected
+            // attribute carries its own leading space, so keeping the old one
+            // would double it in the emitted tag.
+            out = out.slice(0, attrStart).replace(/\s+$/, '');
+          } else {
+            // #1207: the submitter binding. The identity replaces the
+            // `formaction=` hole IN PLACE with the button's own name/value
+            // pair, the one channel a browser submits for the pressed button
+            // alone. No `formaction` url is emitted, so the submission still
+            // targets the page and the form-level identity is simply overridden
+            // by this later entry.
+            //
+            // Refused here rather than at the `>` only where the answer cannot
+            // change later: boundness of the ENCLOSING form is already decided
+            // (its start tag is emitted), and an attribute written BEFORE the
+            // hole is already in `out`. Everything else waits for the close,
+            // where `assertSubmitterStartTag` sees the whole tag.
+            // A second binding hole on this same tag, refused here so the
+            // author gets the duplicate message rather than a confusing
+            // complaint about the `name` the FIRST hole just injected.
+            assertSingleSubmitterAction(pendingSubmitterTag != null, currentTag);
+            // Only 'unknown' defers: a component renders its own template in a
+            // separate pass that cannot see the enclosing form, so the question
+            // is not this scan's to answer. 'none' and 'unbound' are known
+            // answers and are still refused.
+            if (formScope !== 'unknown') assertSubmitterFormIsBound(formScope === 'bound', currentTag);
+            const attrs = parseStartTagAttrs(out.slice(tagStart));
+            if (attrs.has('name')) assertSubmitterHasNoName(attrs.get('name') || '', currentTag, false);
+            if (attrs.has('value')) assertSubmitterHasNoValue(currentTag);
+            if (attrs.has('form')) assertSubmitterHasNoFormAttribute(currentTag);
+            const subId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
+            pendingSubmitterTag = currentTag;
+            out = out.slice(0, attrStart) + `name="${FORM_ACTION_FIELD}" value="${escapeAttr(subId)}"`;
+          }
+          state = 'in-tag';
+          attrName = '';
         } else {
+          // A second `action` hole that resolved to a plain url still COUNTS,
+          // so the duplicate refusal fires whatever the values happen to be.
+          noteActionHole(attrName, currentTag);
+          // #1154: never stringify a function into action=/formaction= (it
+          // would serialize a server action's source into the served HTML).
+          assertNotFunctionActionAttr(val, attrName, currentTag);
           out += `"${escapeAttr(String(val ?? ''))}"`;
           state = 'in-tag';
           attrName = '';
         }
       } else if (state === 'attr-quoted' || state === 'attr-unquoted') {
+        // Same guard for a hole inside a quoted/unquoted value, the
+        // `action="${fn}"` and mixed `action="/x/${fn}"` shapes (#1154).
+        assertNotFunctionActionAttr(val, attrName, currentTag);
         out += escapeAttr(String(val ?? ''));
       }
     }
@@ -411,6 +629,294 @@ function defaultSSRErrorTemplate(tag, err, dev) {
   </div>`;
 }
 
+/**
+ * Index just past the end of the comment starting at `start`, or -1 if it is
+ * unterminated. Shared so every scanner that has to decide where a comment
+ * stops agrees, including on the spec short forms.
+ *
+ * @param {string} html
+ * @param {number} start  index of the `<` of `<!--`
+ * @returns {number}
+ */
+function endOfComment(html, start) {
+  let p = start + 4;
+  // `<!-->` and `<!--->` are comments whose data is empty (spec short forms).
+  if (html[p] === '>') return p + 1;
+  if (html.startsWith('->', p)) return p + 2;
+  while (p < html.length) {
+    // `--!>` is the spec's "abrupt closing" form and closes just like `-->`.
+    if (html.startsWith('-->', p)) return p + 3;
+    if (html.startsWith('--!>', p)) return p + 4;
+    p += 1;
+  }
+  return -1;
+}
+
+/**
+ * Index of the `</script` that really closes a `<script>` whose content starts
+ * at `from`, or -1 when unterminated (#1134).
+ *
+ * Script data is not plain raw text: once the content contains `<!--` followed
+ * by `<script`, the tokenizer is in the script-data-double-escaped state, where
+ * a `</script>` is TEXT (it only steps back to the escaped state) and the
+ * element ends at the NEXT `</script>`. The legacy comment-wrapped inline
+ * script that document.writes a script tag is the pattern that produces this.
+ * Stopping at the first `</script>` there re-opened the original #1128 bug in
+ * the one element the scanner most explicitly claims to handle.
+ *
+ * @param {string} html
+ * @param {number} from  index just past the opening tag's `>`
+ * @returns {number}
+ */
+function endOfScriptContent(html, from) {
+  const re = /<!--|-->|<\/script(?=[\s/>])|<script(?=[\s/>])/gi;
+  re.lastIndex = from;
+  let escaped = false;
+  let dbl = false;
+  let m;
+  while ((m = re.exec(html)) !== null) {
+    const t = m[0];
+    if (t === '<!--') {
+      // The token's own trailing `--` puts the tokenizer in a dash-dash state
+      // REGARDLESS of what state it was in (`<!` are inert bytes in escaped and
+      // double-escaped states too), and every dash-dash state exits straight
+      // back to plain script data on `>`. So `<!-->`, `<!--->`, and any dash
+      // run followed by `>` clear BOTH flags: entering fresh it cancels the
+      // escape before it starts, and inside an escaped or double-escaped body
+      // it is the exit a browser honours, after which the element ends at the
+      // next `</script>`.
+      let q = m.index + 4;
+      while (html[q] === '-') q += 1;
+      if (html[q] === '>') { escaped = false; dbl = false; re.lastIndex = q + 1; }
+      else if (!escaped) escaped = true;
+    }
+    else if (t === '-->') { escaped = false; dbl = false; }
+    else if (t[1] === '/') {
+      if (dbl) dbl = false;
+      else return m.index;
+    } else if (escaped) dbl = true;
+  }
+  return -1;
+}
+
+/**
+ * Byte ranges of `html` where a tag-shaped match is NOT an element (#1128).
+ *
+ * The element scanners below match tags with a flat regex over already-
+ * assembled markup, which has no notion of an HTML context. So a registered tag
+ * name written inside a comment used to be constructed and rendered as a real
+ * element, and the replacement consumed the rest of the comment INCLUDING its
+ * closing `-->`, leaving an unterminated comment that swallowed every following
+ * byte. Whether it happened depended on whether the name in the comment was a
+ * registered component, which is what made it look random.
+ *
+ * This is a single left-to-right pass rather than a search for `<!--`, because
+ * the naive version introduces failures worse than the bug: an `<!--` inside an
+ * attribute value (`title="use <!-- here"`) or inside RCDATA would open a region
+ * that never closes, and every component after it would silently stop rendering.
+ * Deciding that requires knowing the context, which means tokenizing, so the
+ * pass tracks the same states the HTML parser does for these purposes:
+ *
+ * - **Comments**, including the spec's short forms. `<!-->` and `<!--->` close
+ *   immediately, `--!>` closes as well as `-->`, and an unterminated comment
+ *   runs to EOF, exactly as a browser would treat the same bytes.
+ * - **Markup declarations and bogus comments** (`<!doctype …>`, `<![CDATA[…]]>`),
+ *   which end at the next `>`.
+ * - **Tags**, consumed with their quoted attribute values, so `<` and `<!--`
+ *   inside an attribute are inert rather than context-changing.
+ * - **Text-only elements**, whose content the HTML tokenizer never reads as
+ *   markup: raw text (`script`, `style`, `iframe`, `xmp`, `noembed`,
+ *   `noframes`, `plaintext`) and RCDATA (`textarea`, `title`). Their content is
+ *   returned as a skip range too, because a component tag inside a `<style>`
+ *   comment or an `<iframe>` fallback hit the identical markup-destroying path,
+ *   so excluding them would leave half the bug live.
+ *
+ *   Two deliberate exclusions. `<template>` content IS parsed and legitimately
+ *   carries components (Declarative Shadow DOM and the streamed swap templates
+ *   both depend on that). `<noscript>` content is parsed as markup when
+ *   scripting is disabled, which for a progressive-enhancement framework is the
+ *   case that matters, so components inside it must keep rendering.
+ *
+ * @param {string} html
+ * @returns {[number, number][]} ascending, non-overlapping `[start, end)` pairs
+ */
+function inertRanges(html) {
+  /** @type {[number, number][]} */
+  const ranges = [];
+  const n = html.length;
+  let i = 0;
+  while (i < n) {
+    const lt = html.indexOf('<', i);
+    if (lt === -1) break;
+    if (html.startsWith('<!--', lt)) {
+      const end = endOfComment(html, lt);
+      const stop = end === -1 ? n : end;
+      ranges.push([lt, stop]);
+      i = stop;
+      continue;
+    }
+    if (html.startsWith('<!', lt) || html.startsWith('<?', lt)) {
+      // Doctype / bogus comment / processing instruction: ends at the next `>`.
+      const close = html.indexOf('>', lt);
+      const end = close === -1 ? n : close + 1;
+      ranges.push([lt, end]);
+      i = end;
+      continue;
+    }
+    const name = /^<\/?([a-zA-Z][^\s/>]*)/.exec(html.slice(lt, lt + 64));
+    if (!name) {
+      // `</` followed by anything that is not an ASCII letter is the third
+      // bogus-comment form (`</1`, `</<`, `</ `), which the spec also runs to
+      // the next `>`. Without this branch the bytes after it are scanned as
+      // markup and a tag inside gets instantiated, which is the original bug.
+      if (html.startsWith('</', lt)) {
+        const close = html.indexOf('>', lt);
+        const end = close === -1 ? n : close + 1;
+        ranges.push([lt, end]);
+        i = end;
+        continue;
+      }
+      i = lt + 1;
+      continue;
+    }
+    // Consume the tag, honouring quoted attribute values so a `<` or `<!--`
+    // inside one cannot be mistaken for markup.
+    //
+    // A quote only OPENS a value when it directly follows `=`. That condition
+    // is load-bearing rather than pedantic: `escapeAttr` does not escape `'`,
+    // so an interpolated apostrophe in a single-quoted attribute emits three
+    // unbalanced quotes (`title='don't'`). Treating every quote as a delimiter
+    // left the scanner stuck inside a value to EOF, which returned a truncated
+    // range list and silently re-enabled this whole bug for the rest of the
+    // page. A browser recovers at the `>`, and so does this: after the value
+    // closes, the stray `'` is just an attribute-name character.
+    let p = lt + 1;
+    let quote = '';
+    // `expectValue` is set by `=` and cleared by the first non-whitespace
+    // character after it. Only THAT character can open a quoted value, which is
+    // what the spec does: before-attribute-value reconsumes anything else in
+    // attribute-value-unquoted state. Keying off "the previous character was
+    // `=`" instead re-opens the hole on `<a title==">`, where the `"` is an
+    // ordinary value character; an odd quote count then ran the scan to EOF and
+    // returned one giant inert range, silently disabling this whole fix for the
+    // rest of the page.
+    let expectValue = false;
+    // Unquoted values need their own state for two reasons the spec spells out
+    // and a simpler scan gets wrong: `>` ends the tag from here (so `attr=>` is
+    // a missing value, not a value of `>`), and `/` is an ordinary value
+    // character, so an unquoted URL ending in `/` is NOT a self-closing solidus.
+    let inUnquoted = false;
+    let selfClosing = false;
+    while (p < n) {
+      const c = html[p];
+      const isSpace = c === ' ' || c === '\t' || c === '\n' || c === '\r' || c === '\f';
+      if (quote) {
+        if (c === quote) quote = '';
+      } else if (c === '>') {
+        // Checked before the value branches: a `>` arriving where a value was
+        // expected terminates the tag (`<a href=>`). Consuming it as a value
+        // character ran the scan on to the NEXT `>`, which swallowed the real
+        // tag end and re-armed the original bug for what followed.
+        selfClosing = !inUnquoted && html[p - 1] === '/';
+        p += 1;
+        break;
+      } else if (expectValue) {
+        // The first non-whitespace character after `=` decides the value form.
+        if (!isSpace) {
+          if (c === '"' || c === "'") quote = c;
+          else inUnquoted = true;
+          expectValue = false;
+        }
+      } else if (inUnquoted) {
+        if (isSpace) inUnquoted = false;
+      } else if (c === '=') {
+        expectValue = true;
+      }
+      p += 1;
+    }
+    // The tag's interior is not markup either. A component tag written inside
+    // an attribute value (`title="renders a <my-card> element"`) was otherwise
+    // instantiated in place, destroying the rest of the document exactly like
+    // the comment case. Start at lt+1 so the tag's OWN opening `<` still
+    // matches; only what is nested inside it is inert.
+    if (p > lt + 1) ranges.push([lt + 1, p]);
+    i = p;
+    const tag = name[1].toLowerCase();
+    const isClose = html[lt + 1] === '/';
+    // A self-closing start tag has no content to skip. In HTML the `/` is
+    // ignored, but in SVG and MathML foreign content it genuinely closes the
+    // element, and `<svg><title/></svg>` otherwise finds no `</title`, runs the
+    // range to EOF, and makes every component in the rest of the document
+    // inert. Honouring `/>` costs only the malformed-HTML case (`<style/>`,
+    // already broken authoring) and fails in the direction where components
+    // keep rendering rather than silently vanishing.
+    if (!isClose && !selfClosing && isTextOnlyTag(tag)) {
+      // Everything up to the matching close tag is text, not markup.
+      let contentEnd;
+      if (tag === 'plaintext') {
+        // `<plaintext>` has no end tag at all: the rest of the document is text.
+        contentEnd = n;
+      } else if (tag === 'script') {
+        // Script data has the double-escaped state (#1134), so its real end is
+        // not necessarily the first `</script`.
+        const end = endOfScriptContent(html, p);
+        contentEnd = end === -1 ? n : end;
+      } else {
+        const close = new RegExp(`</${tag}(?=[\\s/>])`, 'i').exec(html.slice(p));
+        contentEnd = close ? p + close.index : n;
+      }
+      if (contentEnd > p) ranges.push([p, contentEnd]);
+      i = contentEnd;
+    }
+  }
+  return ranges;
+}
+
+/**
+ * Random-access membership test over ascending, non-overlapping ranges, for
+ * callers whose queries are NOT monotonic (findClosingTagInString resets its
+ * regex cursors backward while pairing opens with closes). O(ranges) per call;
+ * monotonic callers use `inertAt` below instead.
+ *
+ * @param {[number, number][]} ranges
+ * @param {number} index
+ * @returns {boolean}
+ */
+function inRanges(ranges, index) {
+  for (const [start, end] of ranges) {
+    if (start > index) return false;
+    if (index < end) return true;
+  }
+  return false;
+}
+
+/**
+ * A left-to-right membership test over ascending, non-overlapping ranges.
+ *
+ * Returns a function that answers "is this index inert?" and REMEMBERS how far
+ * it has walked, so a caller scanning matches in increasing order pays O(ranges)
+ * across the whole scan instead of O(ranges) per match. Restarting each time is
+ * an O(tags x components) term, which is measurable on a large page: holding a
+ * document at 40k tags and raising the component count adds hundreds of
+ * milliseconds that the cursor removes.
+ *
+ * The cursor only ever moves forward, so callers MUST query in non-decreasing
+ * index order. All three call sites do (`matchAll`, and the two loops that
+ * consume their input left to right). A caller that needs random access should
+ * scan `ranges` directly rather than reusing this.
+ *
+ * @param {[number, number][]} ranges
+ * @returns {(index: number) => boolean}
+ */
+function inertAt(ranges) {
+  let cursor = 0;
+  return (index) => {
+    while (cursor < ranges.length && ranges[cursor][1] <= index) cursor += 1;
+    if (cursor >= ranges.length) return false;
+    return index >= ranges[cursor][0];
+  };
+}
+
 /**
  * Scan an HTML string for registered custom elements and inject
  * Declarative Shadow DOM (`<template shadowrootmode="open">`).
@@ -447,10 +953,15 @@ async function injectDSD(html, ctx, ancestors = [], dev) {
   );
   /** @type {{start:number, end:number, text:string}[]} */
   const edits = [];
+  // A tag name inside a comment, a script, a style, RCDATA, or another tag's
+  // attribute value is text, not an element (#1128).
+  const inert = inertRanges(html);
+  const isInert = inertAt(inert);
   for (const m of html.matchAll(pattern)) {
     const [match, tag, attrs, selfClose] = m;
     const Cls = lookup(tag);
     if (!Cls) continue;
+    if (isInert(m.index)) continue;
     // Track which custom elements actually appeared: used by SSR to emit
     // `<link rel="modulepreload">` hints for their module URLs.
     if (ctx && ctx.usedComponents) ctx.usedComponents.add(tag);
@@ -496,7 +1007,7 @@ async function injectDSD(html, ctx, ancestors = [], dev) {
       let closeEnd = m.index + match.length;
       if (!selfClose) {
         const innerStart = m.index + match.length;
-        const closeIdx = findClosingTagInString(html, innerStart, tag);
+        const closeIdx = findClosingTagInString(html, innerStart, tag, inert);
         if (closeIdx !== -1) {
           authoredInner = html.slice(innerStart, closeIdx);
           const closeRe = new RegExp(`</${escapeRegex(tag)}\\s*>`, 'i');
@@ -549,7 +1060,14 @@ async function injectDSD(html, ctx, ancestors = [], dev) {
       // Render the template to HTML. injectDSD recurses on the result so
       // nested custom elements (e.g. <theme-toggle> inside <blog-shell>)
       // get their own DSD pass.
-      const rawInner = await render(tpl, ctx);
+      // 'unknown' for the form scope (#1207): this is a SEPARATE render pass
+      // over one component's own template, driven by walking the already-emitted
+      // HTML, so it has no idea whether the host tag sits inside a bound
+      // `<form>`. Passing the default 'none' claimed there was no form at all,
+      // which refused a perfectly good `<button formaction=${fn}>` in a
+      // component inside a bound form and, because component SSR errors are
+      // isolated, made the button vanish from a page that still returned 200.
+      const rawInner = await render(tpl, ctx, 'unknown');
 
       if (isShadow) {
         // Shadow DOM: native <slot> stays as-is in the DSD template. The
@@ -644,7 +1162,7 @@ async function injectDSD(html, ctx, ancestors = [], dev) {
       let closeEnd = m.index + match.length;
       if (!selfClose) {
         const innerStart = m.index + match.length;
-        const closeIdx = findClosingTagInString(html, innerStart, tag);
+        const closeIdx = findClosingTagInString(html, innerStart, tag, inert);
         if (closeIdx !== -1) {
           const closeRe = new RegExp(`</${escapeRegex(tag)}\\s*>`, 'i');
           const cm = closeRe.exec(html.slice(closeIdx));
@@ -753,6 +1271,17 @@ function isVoidElement(tag) {
 async function processSuspenseElements(html, ctx, ancestors = [], dev) {
   if (html.indexOf('<webjs-suspense') === -1) return html;
   const OPEN = /<webjs-suspense((?:"[^"]*"|'[^']*'|[^>])*?)>/i;
+  // A commented-out boundary is text, not an element (#1128). This scanner is
+  // the reason the comment fix cannot live in injectDSD alone: it runs FIRST
+  // and hands the boundary's children to a fresh injectDSD as a standalone
+  // string, which has no idea those bytes came from inside a comment. Under
+  // streaming it is worse than a stray render, because the children's data
+  // fetches run and the swap script targets an id that only exists inside a
+  // comment, so it can never resolve. Ranges are computed against the FULL
+  // input once, and `consumed` maps the shrinking `rest` back onto it.
+  const inert = inertRanges(html);
+  const isInert = inertAt(inert);
+  let consumed = 0;
   let result = '';
   let rest = html;
   // Bounded loop: each iteration consumes at least the opening tag.
@@ -762,6 +1291,14 @@ async function processSuspenseElements(html, ctx, ancestors = [], dev) {
       result += rest;
       break;
     }
+    if (isInert(consumed + m.index)) {
+      // Emit through the end of this match and keep scanning after it.
+      const skipTo = m.index + m[0].length;
+      result += rest.slice(0, skipTo);
+      rest = rest.slice(skipTo);
+      consumed += skipTo;
+      continue;
+    }
     const openStart = m.index;
     const openEnd = m.index + m[0].length;
     result += rest.slice(0, openStart);
@@ -769,7 +1306,20 @@ async function processSuspenseElements(html, ctx, ancestors = [], dev) {
     const fbMatch = /data-webjs-fallback="([^"]*)"/i.exec(attrs);
     const fallbackHtml = fbMatch ? unescapeAttr(fbMatch[1]) : '';
 
-    const closeIdx = findClosingTagInString(rest, openEnd, 'webjs-suspense');
+    // Pass the FULL-input ranges shifted into `rest` coordinates rather than
+    // letting the helper re-tokenize the suffix. `rest` can begin mid-comment
+    // or mid-raw-text after the skip path above, and a tokenizer restarted
+    // there is in the wrong state: a text-only opener named later in that same
+    // comment would read as a real element and mark everything to EOF inert,
+    // so the boundary's real close tag was skipped and the trailing markup
+    // folded into the boundary. The shifted view keeps the full-string truth,
+    // including a first range that starts before `rest` does.
+    const shifted = [];
+    for (const [s, e] of inert) {
+      if (e <= consumed) continue;
+      shifted.push([Math.max(0, s - consumed), e - consumed]);
+    }
+    const closeIdx = findClosingTagInString(rest, openEnd, 'webjs-suspense', shifted);
     let inner;
     let afterClose;
     if (closeIdx === -1) {
@@ -792,6 +1342,7 @@ async function processSuspenseElements(html, ctx, ancestors = [], dev) {
       const innerProcessed = await injectDSD(inner, ctx, ancestors, dev);
       result += `<webjs-suspense>${innerProcessed}</webjs-suspense>`;
     }
+    consumed += rest.length - afterClose.length;
     rest = afterClose;
   }
   return result;
@@ -807,18 +1358,34 @@ async function processSuspenseElements(html, ctx, ancestors = [], dev) {
  * @param {string} tagName
  * @returns {number}
  */
-function findClosingTagInString(html, fromIndex, tagName) {
+function findClosingTagInString(html, fromIndex, tagName, inert) {
   const esc = escapeRegex(tagName);
   // Match same-name opening tags. Followed by a name-boundary character
   // so we don't accept <table> as opening <tab>.
   const openRe = new RegExp(`<${esc}(?:[\\s>/])`, 'gi');
   const closeRe = new RegExp(`</${esc}\\s*>`, 'gi');
+  // A tag inside a comment, raw text, RCDATA, or an attribute value is text
+  // and must count for NEITHER side of the depth ledger (#1133). Counting a
+  // commented `<my-card>` as a nested open meant depth never returned to zero,
+  // and matching a commented `</my-card>` as the close truncated the authored
+  // children at the comment, so the projected content ended with an
+  // unterminated `<!--` that a browser read as commenting out the real close
+  // tags. Callers that already computed the ranges for this exact string pass
+  // them; a caller that did not gets them computed here.
+  const ranges = inert === undefined ? inertRanges(html) : inert;
+  const next = (re) => {
+    let m;
+    while ((m = re.exec(html)) !== null) {
+      if (ranges.length === 0 || !inRanges(ranges, m.index)) return m;
+    }
+    return null;
+  };
   openRe.lastIndex = fromIndex;
   closeRe.lastIndex = fromIndex;
   let depth = 1;
   while (depth > 0) {
-    const o = openRe.exec(html);
-    const c = closeRe.exec(html);
+    const o = next(openRe);
+    const c = next(closeRe);
     if (!c) return -1;
     if (o && o.index < c.index) {
       depth++;
@@ -875,14 +1442,20 @@ function partitionAuthoredBySlot(html) {
     if (lt > cursor) defaultBuf += html.slice(cursor, lt);
     const rest = html.slice(lt);
     if (rest.startsWith('<!--')) {
-      const end = html.indexOf('-->', lt + 4);
-      if (end === -1) {
+      // Find the comment's end the same way inertRanges does, rather than with
+      // a bare `indexOf('-->')`. The two helpers both decide where a comment
+      // stops, so a bare search makes them DISAGREE on the spec short forms
+      // (`--!>`, `<!-->`, `<!--->`): this one would run past the real end and
+      // swallow the slotted children that follow, silently routing a
+      // `slot="head"` child into the default slot.
+      const commentEnd = endOfComment(html, lt);
+      if (commentEnd === -1) {
         defaultBuf += rest;
         cursor = html.length;
         break;
       }
-      defaultBuf += html.slice(lt, end + 3);
-      cursor = end + 3;
+      defaultBuf += html.slice(lt, commentEnd);
+      cursor = commentEnd;
       continue;
     }
     if (rest.startsWith('<!') || rest.startsWith('</')) {
@@ -968,8 +1541,16 @@ function substituteSlotsInRender(rendered, partitioned, ownerTag) {
   let result = '';
   let cursor = 0;
   const slotRe = /<slot((?:"[^"]*"|'[^']*'|[^>])*?)(\/?)>/gi;
+  // A `<slot>` written inside a comment is documentation, not a slot (#1128).
+  // Substituting one is worse here than in the element walk: a commented slot
+  // has no `</slot>`, so the fallback scan below swallows the rest of the
+  // template, the component's REAL slot is never substituted, and the authored
+  // children are dropped from the page entirely.
+  const inert = inertRanges(rendered);
+  const isInert = inertAt(inert);
   let m;
   while ((m = slotRe.exec(rendered)) !== null) {
+    if (isInert(m.index)) continue;
     result += rendered.slice(cursor, m.index);
     const [fullOpen, attrsRaw, selfCloseSlash] = m;
     const isSelfClose = !!selfCloseSlash;
@@ -984,7 +1565,7 @@ function substituteSlotsInRender(rendered, partitioned, ownerTag) {
       totalEnd = m.index + fullOpen.length;
     } else {
       const innerStart = m.index + fullOpen.length;
-      const closeIdx = findClosingTagInString(rendered, innerStart, 'slot');
+      const closeIdx = findClosingTagInString(rendered, innerStart, 'slot', inert);
       if (closeIdx === -1) {
         fallback = rendered.slice(innerStart);
         totalEnd = rendered.length;
@@ -1028,6 +1609,41 @@ function isRawtextTag(tag) {
   return tag === 'script' || tag === 'style';
 }
 
+/**
+ * RCDATA elements: their content is text (character references aside), so a
+ * tag-shaped string inside one is not markup. Kept next to `isRawtextTag` so
+ * the two lists stay together rather than drifting apart.
+ * @param {string} tag
+ * @returns {boolean}
+ */
+function isRcdataTag(tag) {
+  return tag === 'textarea' || tag === 'title';
+}
+
+/**
+ * Elements whose content the HTML tokenizer never reads as markup, for the
+ * purposes of `inertRanges` only (#1128).
+ *
+ * Deliberately NOT `isRawtextTag`, even though it overlaps: that predicate is
+ * shared with the template tokenizer, where widening it would change how holes
+ * inside those elements are escaped. This one answers a narrower question,
+ * "can a tag-shaped string in here be a real element", and the answer is no for
+ * every raw-text and RCDATA element, not just the two the template path cares
+ * about. `<iframe>` with fallback markup is the realistic trigger.
+ *
+ * `<noscript>` is excluded on purpose: its content IS parsed as markup when
+ * scripting is disabled, which for a progressive-enhancement framework is the
+ * case that matters, so components inside it must keep rendering.
+ *
+ * @param {string} tag
+ * @returns {boolean}
+ */
+function isTextOnlyTag(tag) {
+  return isRawtextTag(tag) || isRcdataTag(tag)
+    || tag === 'iframe' || tag === 'xmp' || tag === 'noembed'
+    || tag === 'noframes' || tag === 'plaintext';
+}
+
 /**
  * Minimal attribute string parser.
  * @param {string} attrStr
@@ -1244,7 +1860,7 @@ export function renderToStream(value, opts = { ssr: true }) {
       try {
         if (opts && opts.ssr === false) {
           // No DSD injection: just stream the raw rendered chunks.
-          await streamRender(value, ctx, controller);
+          await streamRender(value, ctx, controller, 'none');
         } else {
           // Render to string first to run DSD injection (which operates on
           // the full HTML), then enqueue the result. This matches the
@@ -1273,28 +1889,29 @@ export function renderToStream(value, opts = { ssr: true }) {
  * @param {unknown} value
  * @param {SuspenseCtx} [ctx]
  * @param {ReadableStreamDefaultController<string>} controller
+ * @param {'none'|'unbound'|'bound'|'unknown'} [formScope] enclosing form scope, as seen from THIS scan
  */
-async function streamRender(value, ctx, controller) {
+async function streamRender(value, ctx, controller, formScope = 'none') {
   if (value == null || value === false || value === true) return;
   if (value && typeof /** @type any */ (value).then === 'function') {
     value = await value;
-    return streamRender(value, ctx, controller);
+    return streamRender(value, ctx, controller, formScope);
   }
   if (isUnsafeHTML(value)) {
     controller.enqueue(String(/** @type any */ (value).value ?? ''));
     return;
   }
   if (isLive(value)) {
-    return streamRender(/** @type any */ (value).value, ctx, controller);
+    return streamRender(/** @type any */ (value).value, ctx, controller, formScope);
   }
   if (isWatch(value)) {
-    return streamRender(/** @type any */ (value).signal.get(), ctx, controller);
+    return streamRender(/** @type any */ (value).signal.get(), ctx, controller, formScope);
   }
   if (isKeyed(value)) {
-    return streamRender(/** @type any */ (value).value, ctx, controller);
+    return streamRender(/** @type any */ (value).value, ctx, controller, formScope);
   }
   if (isGuard(value)) {
-    return streamRender(/** @type any */ (value).fn(), ctx, controller);
+    return streamRender(/** @type any */ (value).fn(), ctx, controller, formScope);
   }
   if (isTemplateContent(value)) {
     const tpl = /** @type any */ (value).template;
@@ -1305,19 +1922,19 @@ async function streamRender(value, ctx, controller) {
     return;
   }
   if (isCache(value)) {
-    return streamRender(/** @type any */ (value).value, ctx, controller);
+    return streamRender(/** @type any */ (value).value, ctx, controller, formScope);
   }
   if (isUntil(value)) {
     const args = /** @type any */ (value).args;
     for (const a of args) {
       if (!a || typeof (/** @type any */ (a).then) !== 'function') {
-        return streamRender(a, ctx, controller);
+        return streamRender(a, ctx, controller, formScope);
       }
     }
     if (args.length > 0) {
       try {
         const winner = await Promise.race(args.map((p) => Promise.resolve(p).catch(() => undefined)));
-        return streamRender(winner, ctx, controller);
+        return streamRender(winner, ctx, controller, formScope);
       } catch {
         return;
       }
@@ -1328,13 +1945,13 @@ async function streamRender(value, ctx, controller) {
     return;
   }
   if (Array.isArray(value)) {
-    for (const v of value) await streamRender(v, ctx, controller);
+    for (const v of value) await streamRender(v, ctx, controller, formScope);
     return;
   }
   if (isRepeat(value)) {
     const r = /** @type any */ (value);
     for (let i = 0; i < r.items.length; i++) {
-      await streamRender(r.templateFn(r.items[i], i), ctx, controller);
+      await streamRender(r.templateFn(r.items[i], i), ctx, controller, formScope);
     }
     return;
   }
@@ -1343,16 +1960,16 @@ async function streamRender(value, ctx, controller) {
     if (ctx) {
       const id = `s${ctx.nextId++}`;
       controller.enqueue(`<webjs-boundary id="${id}">`);
-      await streamRender(s.fallback, ctx, controller);
+      await streamRender(s.fallback, ctx, controller, formScope);
       controller.enqueue(`</webjs-boundary>`);
-      ctx.pending.push({ id, promise: Promise.resolve(s.children) });
+      ctx.pending.push({ id, promise: Promise.resolve(s.children), formScope });
     } else {
-      await streamRender(s.fallback, ctx, controller);
+      await streamRender(s.fallback, ctx, controller, formScope);
     }
     return;
   }
   if (isTemplate(value)) {
-    await streamTemplate(/** @type any */ (value), ctx, controller);
+    await streamTemplate(/** @type any */ (value), ctx, controller, formScope);
     return;
   }
   controller.enqueue(escapeText(String(value)));
@@ -1365,8 +1982,9 @@ async function streamRender(value, ctx, controller) {
  * @param {import('./html.js').TemplateResult} tr
  * @param {SuspenseCtx} [ctx]
  * @param {ReadableStreamDefaultController<string>} controller
+ * @param {'none'|'unbound'|'bound'|'unknown'} [formScopeAtStart]
  */
-async function streamTemplate(tr, ctx, controller) {
+async function streamTemplate(tr, ctx, controller, formScopeAtStart = 'none') {
   const { strings, values } = tr;
   let state = 'text';
   let attrName = '';
@@ -1377,6 +1995,101 @@ async function streamTemplate(tr, ctx, controller) {
   let rawTail = '';
   // Buffer used for attribute handling where we may need to backtrack.
   let buf = '';
+  let tagStart = -1;
+  /** @type {string | null} */
+  let pendingActionId = null;
+  // Shapes on the CURRENT start tag that a bound form may not carry (#1155).
+  // Collected as the tag is scanned and judged at its `>`, because the action
+  // hole may come after them.
+  let pendingActionCount = 0;
+  /** @type {string[]} */
+  let pendingPropAttrs = [];
+  /** @type {string[]} */
+  let pendingSubmitterProps = [];
+  /** @type {string | null} */
+  let pendingSubmitterTag = null;  // tag of a bound submitter, until it closes
+  // See the buffered machine: seeded from the caller so a nested template
+  // rendered into a bound form's children knows it is inside one.
+  let formScope = formScopeAtStart;
+  let isCloseTag = false;
+
+  // See the buffered machine for why this runs at the `>` rather than at the
+  // hole. `tagStart` indexes into `buf`, which is safe because `buf` is only
+  // flushed on a `text`-state hole and a start tag contains none.
+  const closeBoundFormTag = () => {
+    // Reset per tag whether or not this one was bound, so a later form is never
+    // judged on an earlier tag's shapes.
+    const propAttrs = pendingPropAttrs;
+    const submitterProps = pendingSubmitterProps;
+    const duplicateAction = pendingActionCount > 1;
+    const submitterTag = pendingSubmitterTag;
+    pendingPropAttrs = [];
+    pendingSubmitterProps = [];
+    pendingActionCount = 0;
+    pendingSubmitterTag = null;
+    if (pendingActionId != null) {
+      assertConvergentBoundForm({ duplicateAction, propAttrs });
+      const bound = bindFormActionStartTag(buf.slice(tagStart), pendingActionId);
+      buf = buf.slice(0, tagStart) + bound.tag + bound.hidden;
+      pendingActionId = null;
+      formScope = 'bound';
+    }
+    // A form that opened and bound NOTHING still opens a scope: a submitter
+    // inside it must be refused, which is a different answer from 'none'.
+    if (!isCloseTag && currentTag === 'form' && formScope !== 'bound') formScope = 'unbound';
+    if (submitterTag != null) {
+      assertSubmitterStartTag(buf.slice(tagStart), submitterTag, { bound: true, duplicateAction, propAttrs: submitterProps });
+    } else if (formScope === 'bound' && !isCloseTag && (currentTag === 'button' || currentTag === 'input')) {
+      // Part B (#1207), the SAME sweep as the buffered machine, through the
+      // same helper, so this second state machine cannot drift from it.
+      assertSubmitterStartTag(buf.slice(tagStart), currentTag, { bound: false, propAttrs: submitterProps });
+    }
+  };
+  // #1155: a `.method` / `.enctype` / `.encoding` prop on a form is dropped
+  // here but applied for real in the browser, where all three are reflected IDL
+  // attributes, so a bound form carrying one submits differently with JS than
+  // without it. Recorded and refused at the `>`, once the tag's action hole is
+  // known.
+  const notePropAttr = (name, tag) => {
+    const t = String(tag).toLowerCase();
+    if (t === 'button' || t === 'input') {
+      // #1207: the submitter twin. `name` / `value` / `formAction` / `formMethod`
+      // / `formEnctype` all reflect on a submitter, so a `.prop` spelling is
+      // dropped here and written to the attribute in the browser.
+      if (isSubmitterReflectedProp(name)) pendingSubmitterProps.push(String(name));
+      return;
+    }
+    if (t !== 'form') return;
+    let n = String(name).toLowerCase();
+    if (n === 'encoding') n = 'enctype';
+    if (n === 'method' || n === 'enctype') pendingPropAttrs.push(String(name));
+  };
+  const noteActionHole = (name, tag) => {
+    const t = String(tag).toLowerCase();
+    const n = String(name).toLowerCase();
+    if ((t === 'form' && n === 'action') ||
+        ((t === 'button' || t === 'input') && n === 'formaction')) {
+      pendingActionCount += 1;
+    }
+  };
+
+  // Same contract as the buffered machine, `allowRawtext` included: only the
+  // `tag-name` and `in-tag` exits ever entered rawtext here either, so a start
+  // tag ending on a bare or unquoted attribute must keep escaping its body.
+  const handleTagEnd = (allowRawtext) => {
+    closeBoundFormTag();
+    if (isCloseTag && currentTag === 'form') {
+      // Back to the scope this scan STARTED in, not a flat 'none'. Under an
+      // 'unknown' seed (the component pass) the scan never learned whether the
+      // host page has a bound form, and closing a form of its own teaches it
+      // nothing about that, so asserting 'none' here would downgrade a
+      // cannot-tell into a conclusive refusal.
+      formScope = formScopeAtStart === 'unknown' ? 'unknown' : 'none';
+    }
+    isCloseTag = false;
+    state = allowRawtext && isRawtextTag(currentTag) ? 'rawtext' : 'text';
+    if (state === 'rawtext') rawTail = '';
+  };
 
   for (let i = 0; i < strings.length; i++) {
     const s = strings[i];
@@ -1385,12 +2098,12 @@ async function streamTemplate(tr, ctx, controller) {
       switch (state) {
         case 'text':
           buf += c;
-          if (c === '<') state = 'tag-open';
+          if (c === '<') { state = 'tag-open'; tagStart = buf.length - 1; isCloseTag = false; }
           break;
         case 'tag-open':
           buf += c;
           if (c === '!') state = 'bang-1';
-          else if (c === '/') { state = 'tag-name'; currentTag = ''; }
+          else if (c === '/') { state = 'tag-name'; currentTag = ''; isCloseTag = true; }
           else if (/[a-zA-Z]/.test(c)) { state = 'tag-name'; currentTag = c.toLowerCase(); }
           else state = 'text';
           break;
@@ -1412,16 +2125,14 @@ async function streamTemplate(tr, ctx, controller) {
         case 'tag-name':
           buf += c;
           if (c === '>') {
-            state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
-            if (state === 'rawtext') rawTail = '';
+            handleTagEnd(true);
           } else if (/\s/.test(c)) state = 'in-tag';
           else currentTag += c.toLowerCase();
           break;
         case 'in-tag':
           buf += c;
           if (c === '>') {
-            state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
-            if (state === 'rawtext') rawTail = '';
+            handleTagEnd(true);
           } else if (!/\s/.test(c) && c !== '/') {
             state = 'attr-name';
             attrName = c;
@@ -1440,18 +2151,18 @@ async function streamTemplate(tr, ctx, controller) {
         case 'attr-name':
           if (c === '=') { state = 'after-eq'; buf += c; }
           else if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; buf += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; buf += c; }
+          else if (c === '>') { state = 'text'; attrName = ''; buf += c; handleTagEnd(false); }
           else { attrName += c; buf += c; }
           break;
         case 'after-eq':
           if (c === '"' || c === "'") { state = 'attr-quoted'; attrQuote = c; buf += c; }
           else if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; buf += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; buf += c; }
+          else if (c === '>') { state = 'text'; attrName = ''; buf += c; handleTagEnd(false); }
           else { state = 'attr-unquoted'; buf += c; }
           break;
         case 'attr-unquoted':
           if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; buf += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; buf += c; }
+          else if (c === '>') { state = 'text'; attrName = ''; buf += c; handleTagEnd(false); }
           else buf += c;
           break;
         case 'attr-quoted':
@@ -1478,26 +2189,92 @@ async function streamTemplate(tr, ctx, controller) {
       } else if (state === 'text') {
         // Flush the buffered static content before streaming the value.
         if (buf) { controller.enqueue(buf); buf = ''; }
-        await streamRender(val, ctx, controller);
+        await streamRender(val, ctx, controller, formScope);
       } else if (state === 'after-eq') {
         const prefix = attrName[0];
         const name = attrName.slice(1);
         const kind = BINDING_PREFIXES[prefix];
         if (kind === 'event' || kind === 'prop') {
+          // Guard `prop` ONLY, matching the buffered machine. An `@action`
+          // event binding is dropped here and never stringified, and a
+          // function is the LEGITIMATE value for one (`<my-el @action=${fn}>`
+          // listens for an `action` event), so refusing it would be a false
+          // positive. `.action` differs where the property REFLECTS: on a form
+          // (and `.formAction` on a button or input) the client assignment
+          // writes the source into the DOM, so refusing at SSR keeps a page
+          // from rendering clean on the server and throwing on hydration.
+          // Elsewhere the property reflects nothing and a function stays
+          // legal, which is why the check below is gated on a hyphen-free
+          // tag. A custom element is excluded for a different reason than
+          // "it does not reflect": a prop declared `reflect: true` DOES
+          // reflect there, and used to write the source from its own setter.
+          // #1169 guards that at the setter (a function removes the
+          // attribute; an array carrying one does too, except under an
+          // Object/Array type, where JSON drops it losslessly), so it
+          // needs no commit-site check here.
+          //
+          // Unlike the buffered machine this drops EVERY prop, including
+          // `<webjs-suspense .fallback>`: there is no injectDSD pre-pass on
+          // this path (it is reached only through `renderToStream(v, { ssr:
+          // false })`), so there is no consumer for a `data-webjs-fallback`
+          // and emitting one would put an attribute in the markup that nothing
+          // reads.
+          if (kind === 'prop' && !currentTag.includes('-')) {
+            assertNotFunctionReflectedActionProp(val, name, currentTag);
+            notePropAttr(name, currentTag);
+          }
           buf = buf.slice(0, attrStart);
           state = 'in-tag';
           attrName = '';
         } else if (kind === 'bool') {
+          // A boolean binding stringifies nothing, so this never leaked, but
+          // `?action=${fn}` is meaningless in every case (a truthy function
+          // emits a bare `action=""`), and refusing it keeps the rule the docs
+          // state true for every sigil rather than true only when quoted.
+          assertNotFunctionActionAttr(val, name, currentTag);
           buf = buf.slice(0, attrStart);
           if (val) buf += `${name}=""`;
           state = 'in-tag';
           attrName = '';
+        } else if (isBoundFormAction(val, attrName, currentTag)) {
+          noteActionHole(attrName, currentTag);
+          // The SAME bindings as the buffered renderer (#1155, #1207), in the
+          // second machine, so `renderToStream(v, { ssr: false })` emits an
+          // identical form rather than refusing one the page renderer accepts.
+          if (currentTag === 'form') {
+            pendingActionId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
+            buf = buf.slice(0, attrStart).replace(/\s+$/, '');
+          } else {
+            assertSingleSubmitterAction(pendingSubmitterTag != null, currentTag);
+            // Only 'unknown' defers: a component renders its own template in a
+            // separate pass that cannot see the enclosing form, so the question
+            // is not this scan's to answer. 'none' and 'unbound' are known
+            // answers and are still refused.
+            if (formScope !== 'unknown') assertSubmitterFormIsBound(formScope === 'bound', currentTag);
+            const attrs = parseStartTagAttrs(buf.slice(tagStart));
+            if (attrs.has('name')) assertSubmitterHasNoName(attrs.get('name') || '', currentTag, false);
+            if (attrs.has('value')) assertSubmitterHasNoValue(currentTag);
+            if (attrs.has('form')) assertSubmitterHasNoFormAttribute(currentTag);
+            const subId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
+            pendingSubmitterTag = currentTag;
+            buf = buf.slice(0, attrStart) + `name="${FORM_ACTION_FIELD}" value="${escapeAttr(subId)}"`;
+          }
+          state = 'in-tag';
+          attrName = '';
         } else {
+          noteActionHole(attrName, currentTag);
+          // The SAME guard as the buffered renderer above. This is a second,
+          // independent state machine, so it inherits nothing from that one;
+          // a change to the rule has to land in both. Reached only via
+          // `renderToStream(v, { ssr: false })`, which no page render uses, so
+          // this covers the public API surface rather than a page leak.
+          assertNotFunctionActionAttr(val, attrName, currentTag);
           buf += `"${escapeAttr(String(val ?? ''))}"`;
           state = 'in-tag';
           attrName = '';
         }
       } else if (state === 'attr-quoted' || state === 'attr-unquoted') {
+        assertNotFunctionActionAttr(val, attrName, currentTag);
         buf += escapeAttr(String(val ?? ''));
       }
     }
@@ -1529,10 +2306,10 @@ async function streamSuspenseBoundaries(ctx, controller, dev) {
   while (ctx.pending.length) {
     const batch = ctx.pending.splice(0);
     await Promise.all(
-      batch.map(async ({ id, promise }) => {
+      batch.map(async ({ id, promise, formScope }) => {
         try {
           const resolved = await promise;
-          const html = await render(resolved, ctx);
+          const html = await render(resolved, ctx, formScope);
           const full = await injectDSD(html, ctx, [], dev);
           controller.enqueue(
             `<template data-webjs-resolve="${id}">${full}</template>` +