From 04f08a763a03c0de137e7dba1e1a39356202aab1 Mon Sep 17 00:00:00 2001
From: Ana Sollano Kim <ansollan@microsoft.com>
Date: Thu, 7 May 2026 11:55:47 -0700
Subject: [PATCH 1/3] Add web component platform behaviors demo

---
 README.md                                   |   1 +
 web-component-platform-behaviors/README.md  |  38 +++
 web-component-platform-behaviors/index.html | 163 +++++++++++++
 web-component-platform-behaviors/script.js  | 173 +++++++++++++
 web-component-platform-behaviors/style.css  | 255 ++++++++++++++++++++
 5 files changed, 630 insertions(+)
 create mode 100644 web-component-platform-behaviors/README.md
 create mode 100644 web-component-platform-behaviors/index.html
 create mode 100644 web-component-platform-behaviors/script.js
 create mode 100644 web-component-platform-behaviors/style.css

diff --git a/README.md b/README.md
index d571dbd..bcd61c9 100644
--- a/README.md
+++ b/README.md
@@ -175,6 +175,7 @@ sync'd July 30, 2025
 | JSON dummy data | Simple JSON files.  Used for [View a JSON file or server response with formatting](https://learn.microsoft.com/microsoft-edge/web-platform/json-viewer). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) (Readme) |
 | OpaqueRange | Demonstrates the `OpaqueRange` API for creating ranges over `<textarea>` and `<input>` values, enabling caret popup positioning and CSS Custom Highlight API usage on form controls. | [/opaque-range/](https://github.com/MicrosoftEdge/Demos/tree/main/opaque-range) | [OpaqueRange demo](https://microsoftedge.github.io/Demos/opaque-range/) |
 | Page Colors Custom Scrollbars demo | Shows a custom, green scrollbar in a page that has custom colors. | [/page-colors-custom-scrollbars/](https://github.com/MicrosoftEdge/Demos/tree/main/page-colors-custom-scrollbars) | [Page Colors Custom Scrollbars demo](https://microsoftedge.github.io/Demos/page-colors-custom-scrollbars/) |
+| Web component platform behaviors | Demonstrates `HTMLSubmitButtonBehavior` for custom elements: form submission, override properties, implicit submission, and accessibility. | [/web-component-platform-behaviors/](https://github.com/MicrosoftEdge/Demos/tree/main/web-component-platform-behaviors) | [Web component platform behaviors demo](https://microsoftedge.github.io/Demos/web-component-platform-behaviors/) |
 | Reference Target demos | Interactive demos of the Reference Target proposal, which allows ID references to cross shadow DOM boundaries. | [/reference-target/](https://github.com/MicrosoftEdge/Demos/tree/main/reference-target) | [Reference Target demos](https://microsoftedge.github.io/Demos/reference-target/) |
 | Reader app | An article reader app used to demonstrate how to use various web APIs such as CSS Custom Highlight, `<selectmenu>`, EyeDropper, CSS and JSON modules, Scroll animation timeline, and Async Clipboard. | [/reader/](https://github.com/MicrosoftEdge/Demos/tree/main/reader) | [Reader](https://microsoftedge.github.io/Demos/reader/) demo |
 | Scoped Custom Element Registries | Define custom elements scoped to a specific shadow roots, elements, or documents. | [/scoped-custom-element-registries/](https://github.com/MicrosoftEdge/Demos/tree/main/scoped-custom-element-registries) | [Scoped Custom Element Registries](https://microsoftedge.github.io/Demos/scoped-custom-element-registries/) demo |
diff --git a/web-component-platform-behaviors/README.md b/web-component-platform-behaviors/README.md
new file mode 100644
index 0000000..bf4510e
--- /dev/null
+++ b/web-component-platform-behaviors/README.md
@@ -0,0 +1,38 @@
+# Web component platform behaviors
+
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/web-component-platform-behaviors/)** ⬅️
+
+🔗 **Links:**
+* Explainer: [Platform-provided behaviors explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PlatformProvidedBehaviors/explainer.md)
+* WHATWG issue: [#12150](https://github.com/whatwg/html/issues/12150)
+* Spec PR: [whatwg/html#12409](https://github.com/whatwg/html/pull/12409)
+* Chromium bug: [crbug.com/486928684](https://crbug.com/486928684)
+
+## Overview
+
+Platform-provided behaviors allow custom elements to adopt native HTML behaviors through `attachInternals({ behaviors: [...] })`. The first behavior, `HTMLSubmitButtonBehavior`, turns a custom element into a submit button that participates in form submission, contributes name/value pairs, supports form override attributes, triggers implicit submission, exposes the correct accessibility semantics, and responds to keyboard activation.
+
+## Demos
+
+- **Basic form submission**: A `<my-submit-button>` custom element with `HTMLSubmitButtonBehavior` submits a form the same way a native `<button type="submit">` does.
+- **Form override properties**: Shows how `name`, `value`, `formAction`, `formMethod`, and `formEnctype` on the behavior instance let an `<override-submit-button>` custom element override the form's defaults.
+- **Implicit submission**: Pressing Enter in a text field triggers implicit submission through an `<implicit-submit-button>` custom element.
+- **Accessibility and keyboard activation**: An `<a11y-submit-button>` custom element gets `role="button"`, focusability, and Enter/Space activation with no extra code.
+
+## Learn more
+
+Read our [platform-provided behaviors explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PlatformProvidedBehaviors/explainer.md).
+
+## Test the feature
+
+The feature is behind a flag and not yet enabled by default. To test it locally:
+
+1. Use Microsoft Edge or another Chromium-based browser, version 149 or later.
+2. Navigate to `about://flags`.
+3. Search for **Experimental Web Platform features** and enable it.
+4. Restart the browser.
+5. Open this demo. If the feature is active, you will not see any warning banner at the top.
+
+## Provide feedback
+
+Comment on the [WHATWG issue](https://github.com/whatwg/html/issues/12150).
diff --git a/web-component-platform-behaviors/index.html b/web-component-platform-behaviors/index.html
new file mode 100644
index 0000000..95741c1
--- /dev/null
+++ b/web-component-platform-behaviors/index.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Web component platform behaviors</title>
+  <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>Web component platform behaviors</h1>
+  <p>
+    Platform-provided behaviors allow custom elements to adopt native HTML
+    behaviors through <code>attachInternals({ behaviors: [...] })</code>. The first
+    behavior, <code>HTMLSubmitButtonBehavior</code>, turns a custom element into a
+    submit button that participates in form submission, contributes name/value
+    pairs, supports form override attributes, triggers implicit submission,
+    exposes the correct accessibility semantics, and responds to keyboard
+    activation.
+    <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PlatformProvidedBehaviors/explainer.md">Read
+      the explainer</a>.
+    <a href="https://github.com/whatwg/html/issues/12150">Give feedback</a>.
+  </p>
+
+  <div id="feature-warning" class="warning" hidden>
+    <strong>⚠️ HTMLSubmitButtonBehavior is not supported in this browser.</strong>
+    Enable the <strong>Experimental Web Platform features</strong> flag at
+    <code>about://flags</code> in Microsoft Edge or another Chromium-based browser (version 149+).
+  </div>
+
+  <!-- Use Case 1: Basic Form Submission -->
+  <section class="demo-section">
+    <h2>Use case 1: Basic form submission</h2>
+    <p>
+      The <strong>Submit form</strong> button below is a <code>&lt;my-submit-button&gt;</code>
+      custom element with <code>HTMLSubmitButtonBehavior</code>, which makes it submit
+      forms just like a native <code>&lt;button type="submit"&gt;</code> element. Click
+      the custom submit button below, or press Enter while focused on a field, to
+      submit the form.
+    </p>
+
+    <form id="form-basic">
+      <div class="form-row">
+        <label for="basic-name">Name:</label>
+        <input type="text" id="basic-name" name="username" placeholder="Enter your name" value="Alice">
+      </div>
+      <div class="form-row">
+        <label for="basic-email">Email:</label>
+        <input type="email" id="basic-email" name="email" placeholder="Enter your email" value="alice@example.com">
+      </div>
+      <my-submit-button>Submit form</my-submit-button>
+    </form>
+    <div id="basic-output" class="output" hidden>
+      <h3>Form data submitted:</h3>
+      <pre id="basic-data"></pre>
+    </div>
+    <p class="info-text">
+      <a href="https://github.com/AnaSkIM/Demos/blob/platform-behaviors/web-component-platform-behaviors/script.js#L13-L21">View source on GitHub</a>
+    </p>
+  </section>
+
+  <!-- Use Case 2: Form Override Properties -->
+  <section class="demo-section">
+    <h2>Use case 2: Form override properties</h2>
+    <p>
+      The two buttons below are <code>&lt;override-submit-button&gt;</code> custom elements.
+      Each one sets <code>name</code>, <code>value</code>, and <code>formMethod</code>
+      on its <code>HTMLSubmitButtonBehavior</code> instance to override the form's
+      default method and include its own name/value pair in the submission data.
+    </p>
+
+    <form id="form-overrides">
+      <div class="form-row">
+        <label for="override-message">Message:</label>
+        <input type="text" id="override-message" name="message" value="Hello, world!">
+      </div>
+      <div class="button-group">
+        <override-submit-button id="save-btn">
+          Save (POST)
+        </override-submit-button>
+        <override-submit-button id="draft-btn">
+          Save as draft (GET)
+        </override-submit-button>
+      </div>
+    </form>
+    <div id="overrides-output" class="output" hidden>
+      <h3>Submission details:</h3>
+      <pre id="overrides-data"></pre>
+    </div>
+    <p class="info-text">
+      <a href="https://github.com/AnaSkIM/Demos/blob/platform-behaviors/web-component-platform-behaviors/script.js#L23-L48">View source on GitHub</a>
+    </p>
+  </section>
+
+  <!-- Use Case 3: Implicit Submission -->
+  <section class="demo-section">
+    <h2>Use case 3: Implicit submission</h2>
+    <p>
+      The <strong>Search</strong> button below is an <code>&lt;implicit-submit-button&gt;</code>
+      custom element. When a form contains a custom element with
+      <code>HTMLSubmitButtonBehavior</code>, pressing <kbd>Enter</kbd> in a text field
+      triggers implicit submission through that element, just like it would with a
+      native submit button. Try pressing <kbd>Enter</kbd> in the input below.
+    </p>
+
+    <form id="form-implicit">
+      <div class="form-row">
+        <label for="implicit-search">Search:</label>
+        <input type="text" id="implicit-search" name="query" placeholder="Type something and press Enter...">
+      </div>
+      <implicit-submit-button>Search</implicit-submit-button>
+    </form>
+    <div id="implicit-output" class="output" hidden>
+      <h3>Implicitly submitted:</h3>
+      <pre id="implicit-data"></pre>
+    </div>
+    <p class="info-text">
+      <a href="https://github.com/AnaSkIM/Demos/blob/platform-behaviors/web-component-platform-behaviors/script.js#L50-L58">View source on GitHub</a>
+    </p>
+  </section>
+
+  <!-- Use Case 4: Accessibility -->
+  <section class="demo-section">
+    <h2>Use case 4: Accessibility and keyboard activation</h2>
+    <p>
+      The <strong>Accessible submit</strong> button below is an
+      <code>&lt;a11y-submit-button&gt;</code> custom element. Custom elements with
+      <code>HTMLSubmitButtonBehavior</code> automatically get:
+    </p>
+    <ul>
+      <li>Implicit ARIA <code>role="button"</code></li>
+      <li>Focusability (default <code>tabindex=0</code>)</li>
+      <li>Keyboard activation via <kbd>Enter</kbd> and <kbd>Space</kbd></li>
+    </ul>
+    <p>
+      Try using <kbd>Tab</kbd> to focus the button below, then press
+      <kbd>Enter</kbd> or <kbd>Space</kbd> to activate it.
+    </p>
+
+    <form id="form-a11y">
+      <div class="form-row">
+        <label for="a11y-data">Data:</label>
+        <input type="text" id="a11y-data" name="payload" value="keyboard-submitted">
+      </div>
+      <a11y-submit-button>Accessible submit</a11y-submit-button>
+    </form>
+    <div id="a11y-output" class="output" hidden>
+      <h3>Activated via keyboard:</h3>
+      <pre id="a11y-data-output"></pre>
+    </div>
+    <p id="a11y-info" class="info-text">
+      Inspect the custom element in DevTools. Its computed accessibility role is
+      <code>button</code>, with no explicit ARIA attributes needed.
+      <a href="https://github.com/AnaSkIM/Demos/blob/platform-behaviors/web-component-platform-behaviors/script.js#L60-L68">View source on GitHub</a>
+    </p>
+  </section>
+
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/web-component-platform-behaviors/script.js b/web-component-platform-behaviors/script.js
new file mode 100644
index 0000000..2cb9613
--- /dev/null
+++ b/web-component-platform-behaviors/script.js
@@ -0,0 +1,173 @@
+// ---- Feature detection ----
+const supportsBehaviors = typeof HTMLSubmitButtonBehavior !== "undefined";
+
+if (!supportsBehaviors) {
+  document.getElementById("feature-warning").hidden = false;
+}
+
+// ---- Custom element definitions ----
+
+if (supportsBehaviors) {
+  class MySubmitButton extends HTMLElement {
+    static formAssociated = true;
+
+    constructor() {
+      super();
+      const behavior = new HTMLSubmitButtonBehavior();
+      this.attachInternals({ behaviors: [behavior] });
+    }
+  }
+  customElements.define("my-submit-button", MySubmitButton);
+
+  class OverrideSubmitButton extends HTMLElement {
+    static formAssociated = true;
+    #behavior;
+
+    constructor() {
+      super();
+      this.#behavior = new HTMLSubmitButtonBehavior();
+      this.attachInternals({ behaviors: [this.#behavior] });
+    }
+
+    get behavior() { return this.#behavior; }
+  }
+  customElements.define("override-submit-button", OverrideSubmitButton);
+
+  // Set form override properties on the behavior instances.
+  const saveBtn = document.querySelector("#save-btn");
+  saveBtn.behavior.name = "action";
+  saveBtn.behavior.value = "save";
+  saveBtn.behavior.formMethod = "post";
+
+  const draftBtn = document.querySelector("#draft-btn");
+  draftBtn.behavior.name = "action";
+  draftBtn.behavior.value = "draft";
+  draftBtn.behavior.formMethod = "get";
+
+  class ImplicitSubmitButton extends HTMLElement {
+    static formAssociated = true;
+
+    constructor() {
+      super();
+      const behavior = new HTMLSubmitButtonBehavior();
+      this.attachInternals({ behaviors: [behavior] });
+    }
+  }
+  customElements.define("implicit-submit-button", ImplicitSubmitButton);
+
+  class A11ySubmitButton extends HTMLElement {
+    static formAssociated = true;
+
+    constructor() {
+      super();
+      const behavior = new HTMLSubmitButtonBehavior();
+      this.attachInternals({ behaviors: [behavior] });
+    }
+  }
+  customElements.define("a11y-submit-button", A11ySubmitButton);
+}
+
+// ===========================================================================
+// Use Case 1: Basic Form Submission
+// ===========================================================================
+
+const formBasic = document.getElementById("form-basic");
+const basicOutput = document.getElementById("basic-output");
+const basicData = document.getElementById("basic-data");
+
+formBasic.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const data = new FormData(formBasic);
+  const entries = [...data.entries()];
+
+  const submitter = event.submitter;
+  let result = "Form entries:\n";
+  entries.forEach(([key, val]) => {
+    result += `  ${key} = ${val}\n`;
+  });
+  result += `\nSubmitter: <${submitter?.localName || "unknown"}>`;
+  if (submitter?.tagName && !submitter.tagName.includes("-")) {
+    result += " (native)";
+  } else if (submitter?.tagName) {
+    result += " (custom element)";
+  }
+
+  basicData.textContent = result;
+  basicOutput.hidden = false;
+});
+
+// ===========================================================================
+// Use Case 2: Form Override Properties
+// ===========================================================================
+
+const formOverrides = document.getElementById("form-overrides");
+const overridesOutput = document.getElementById("overrides-output");
+const overridesData = document.getElementById("overrides-data");
+
+formOverrides.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const data = new FormData(formOverrides);
+  const entries = [...data.entries()];
+
+  const submitter = event.submitter;
+  let result = "Form entries:\n";
+  entries.forEach(([key, val]) => {
+    result += `  ${key} = ${val}\n`;
+  });
+
+  result += `\nSubmitter: <${submitter?.localName || "unknown"}>`;
+  result += `\nBehavior name: ${submitter?.behavior?.name || "(none)"}`;
+  result += `\nBehavior value: ${submitter?.behavior?.value || "(none)"}`;
+  result += `\nBehavior formMethod: ${submitter?.behavior?.formMethod || "(none)"}`;
+
+  overridesData.textContent = result;
+  overridesOutput.hidden = false;
+});
+
+// ===========================================================================
+// Use Case 3: Implicit Submission
+// ===========================================================================
+
+const formImplicit = document.getElementById("form-implicit");
+const implicitOutput = document.getElementById("implicit-output");
+const implicitData = document.getElementById("implicit-data");
+
+formImplicit.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const data = new FormData(formImplicit);
+  const entries = [...data.entries()];
+
+  let result = "Form entries:\n";
+  entries.forEach(([key, val]) => {
+    result += `  ${key} = ${val}\n`;
+  });
+  result += `\nSubmitter: <${event.submitter?.localName || "unknown"}> (custom element)`;
+
+  implicitData.textContent = result;
+  implicitOutput.hidden = false;
+});
+
+// ===========================================================================
+// Use Case 4: Accessibility and Keyboard Activation
+// ===========================================================================
+
+const formA11y = document.getElementById("form-a11y");
+const a11yOutput = document.getElementById("a11y-output");
+const a11yDataOutput = document.getElementById("a11y-data-output");
+
+formA11y.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const data = new FormData(formA11y);
+  const entries = [...data.entries()];
+
+  let result = "Form entries:\n";
+  entries.forEach(([key, val]) => {
+    result += `  ${key} = ${val}\n`;
+  });
+  result += `\nSubmitter: <${event.submitter?.localName || "unknown"}>`;
+  result += `\nSubmitter tabIndex: ${event.submitter?.tabIndex ?? "N/A"}`;
+
+  a11yDataOutput.textContent = result;
+  a11yOutput.hidden = false;
+});
+
diff --git a/web-component-platform-behaviors/style.css b/web-component-platform-behaviors/style.css
new file mode 100644
index 0000000..a67faef
--- /dev/null
+++ b/web-component-platform-behaviors/style.css
@@ -0,0 +1,255 @@
+:root {
+  --color-text: #1b1b1b;
+  --color-bg: white;
+  --color-surface: #eee;
+  --color-surface-alt: white;
+  --color-border: #bbb;
+  --color-border-light: #ddd;
+  --color-muted: #555;
+  --color-accent: #0067b8;
+  --color-accent-hover: #005a9e;
+  --color-accent-active: #004578;
+  --color-accent-focus-ring: rgba(0, 103, 184, 0.2);
+  --color-code-bg: #f0f0f0;
+  --color-kbd-border: #ccc;
+  --color-kbd-shadow: #bbb;
+  --color-warning-bg: #fff3cd;
+  --color-warning-border: #ffecb5;
+  --color-warning-text: #664d03;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text: #e0e0e0;
+    --color-bg: #1e1e1e;
+    --color-surface: #2a2a2a;
+    --color-surface-alt: #333;
+    --color-border: #555;
+    --color-border-light: #444;
+    --color-muted: #aaa;
+    --color-accent: #4fc3f7;
+    --color-accent-hover: #81d4fa;
+    --color-accent-active: #29b6f6;
+    --color-accent-focus-ring: rgba(79, 195, 247, 0.25);
+    --color-code-bg: #2d2d2d;
+    --color-kbd-border: #555;
+    --color-kbd-shadow: #444;
+    --color-warning-bg: #3e3219;
+    --color-warning-border: #5c4a1c;
+    --color-warning-text: #ffd54f;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+input,
+textarea,
+button {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  font-size: 16px;
+  font-family: system-ui, sans-serif;
+  font-weight: 400;
+}
+
+html {
+  min-block-size: 100vh;
+}
+
+body {
+  max-inline-size: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+  background: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.6;
+}
+
+h1 {
+  margin-block: 2rem;
+  font-size: 1.75rem;
+}
+
+body > p {
+  margin-block: 2rem;
+}
+
+h2 {
+  font-size: 1.3rem;
+  margin: 0 0 1rem 0;
+  border-block-end: 1px solid var(--color-border-light);
+  padding-block-end: 1rem;
+}
+
+h3 {
+  font-size: 1rem;
+  margin-block-end: 0.25rem;
+}
+
+code,
+kbd {
+  font-family: Consolas, "Courier New", monospace;
+  font-size: 0.9em;
+  background: var(--color-code-bg);
+  padding: 0.15em 0.35em;
+  border-radius: 3px;
+}
+
+.demo-section code {
+  background: var(--color-surface-alt);
+}
+
+kbd {
+  border: 1px solid var(--color-kbd-border);
+  box-shadow: 0 1px 0 var(--color-kbd-shadow);
+}
+
+a {
+  color: var(--color-accent);
+}
+
+.warning {
+  background: var(--color-warning-bg);
+  border: 1px solid var(--color-warning-border);
+  border-radius: 6px;
+  padding: 0.75rem 1rem;
+  margin-block: 1rem;
+  color: var(--color-warning-text);
+}
+
+.demo-section {
+  margin-block-end: 2rem;
+  background: var(--color-surface);
+  padding: 1rem;
+  border-radius: 6px;
+}
+
+.form-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-block-end: 0.75rem;
+}
+
+.form-row label {
+  font-weight: 600;
+  white-space: nowrap;
+  min-inline-size: 5rem;
+}
+
+.form-row input {
+  flex: 1;
+}
+
+input[type="text"],
+input[type="email"] {
+  inline-size: 100%;
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  font-size: 1rem;
+  background: var(--color-bg);
+  color: var(--color-text);
+  transition: border-color 0.15s;
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-accent-focus-ring);
+}
+
+/* Custom element submit buttons */
+my-submit-button,
+override-submit-button,
+implicit-submit-button,
+a11y-submit-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1.25rem;
+  border: 2px solid var(--color-accent);
+  border-radius: 6px;
+  background: var(--color-accent);
+  color: var(--color-bg);
+  font-size: 0.95rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+  user-select: none;
+}
+
+my-submit-button:hover,
+override-submit-button:hover,
+implicit-submit-button:hover,
+a11y-submit-button:hover {
+  background: var(--color-accent-hover);
+  border-color: var(--color-accent-hover);
+}
+
+my-submit-button:active,
+override-submit-button:active,
+implicit-submit-button:active,
+a11y-submit-button:active {
+  background: var(--color-accent-active);
+  border-color: var(--color-accent-active);
+}
+
+my-submit-button:focus-visible,
+override-submit-button:focus-visible,
+implicit-submit-button:focus-visible,
+a11y-submit-button:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.button-group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.output {
+  margin-block-start: 1rem;
+  background: var(--color-surface-alt);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 0.75rem 1rem;
+}
+
+.output h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.9rem;
+  color: var(--color-muted);
+}
+
+.output pre {
+  margin: 0;
+  font-family: Consolas, "Courier New", monospace;
+  font-size: 0.85rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.info-text {
+  font-size: 0.9rem;
+  color: var(--color-muted);
+  min-block-size: 1.4rem;
+}
+
+ul {
+  padding-inline-start: 1.5rem;
+  margin-block: 0.5rem;
+}
+
+li {
+  margin-block-end: 0.25rem;
+}

From 8f9b04b91e411c2e4e2a46f2ed059b3d3266461d Mon Sep 17 00:00:00 2001
From: Ana Sollano Kim <ansollan@microsoft.com>
Date: Fri, 8 May 2026 10:50:09 -0700
Subject: [PATCH 2/3] Address PR review feedback

---
 README.md                                     |  2 +-
 .../README.md                                 | 20 +++++------
 .../index.html                                | 12 +++----
 .../script.js                                 |  0
 .../style.css                                 | 33 ++++++++++++-------
 5 files changed, 39 insertions(+), 28 deletions(-)
 rename {web-component-platform-behaviors => platform-provided-behaviors-for-custom-elements}/README.md (62%)
 rename {web-component-platform-behaviors => platform-provided-behaviors-for-custom-elements}/index.html (87%)
 rename {web-component-platform-behaviors => platform-provided-behaviors-for-custom-elements}/script.js (100%)
 rename {web-component-platform-behaviors => platform-provided-behaviors-for-custom-elements}/style.css (86%)

diff --git a/README.md b/README.md
index bcd61c9..dc4280e 100644
--- a/README.md
+++ b/README.md
@@ -175,7 +175,7 @@ sync'd July 30, 2025
 | JSON dummy data | Simple JSON files.  Used for [View a JSON file or server response with formatting](https://learn.microsoft.com/microsoft-edge/web-platform/json-viewer). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) (Readme) |
 | OpaqueRange | Demonstrates the `OpaqueRange` API for creating ranges over `<textarea>` and `<input>` values, enabling caret popup positioning and CSS Custom Highlight API usage on form controls. | [/opaque-range/](https://github.com/MicrosoftEdge/Demos/tree/main/opaque-range) | [OpaqueRange demo](https://microsoftedge.github.io/Demos/opaque-range/) |
 | Page Colors Custom Scrollbars demo | Shows a custom, green scrollbar in a page that has custom colors. | [/page-colors-custom-scrollbars/](https://github.com/MicrosoftEdge/Demos/tree/main/page-colors-custom-scrollbars) | [Page Colors Custom Scrollbars demo](https://microsoftedge.github.io/Demos/page-colors-custom-scrollbars/) |
-| Web component platform behaviors | Demonstrates `HTMLSubmitButtonBehavior` for custom elements: form submission, override properties, implicit submission, and accessibility. | [/web-component-platform-behaviors/](https://github.com/MicrosoftEdge/Demos/tree/main/web-component-platform-behaviors) | [Web component platform behaviors demo](https://microsoftedge.github.io/Demos/web-component-platform-behaviors/) |
+| Platform-provided behaviors for custom elements | Demonstrates `HTMLSubmitButtonBehavior` for custom elements: form submission, override properties, implicit submission, and accessibility. | [/platform-provided-behaviors-for-custom-elements/](https://github.com/MicrosoftEdge/Demos/tree/main/platform-provided-behaviors-for-custom-elements) | [Platform-provided behaviors for custom elements demo](https://microsoftedge.github.io/Demos/platform-provided-behaviors-for-custom-elements/) |
 | Reference Target demos | Interactive demos of the Reference Target proposal, which allows ID references to cross shadow DOM boundaries. | [/reference-target/](https://github.com/MicrosoftEdge/Demos/tree/main/reference-target) | [Reference Target demos](https://microsoftedge.github.io/Demos/reference-target/) |
 | Reader app | An article reader app used to demonstrate how to use various web APIs such as CSS Custom Highlight, `<selectmenu>`, EyeDropper, CSS and JSON modules, Scroll animation timeline, and Async Clipboard. | [/reader/](https://github.com/MicrosoftEdge/Demos/tree/main/reader) | [Reader](https://microsoftedge.github.io/Demos/reader/) demo |
 | Scoped Custom Element Registries | Define custom elements scoped to a specific shadow roots, elements, or documents. | [/scoped-custom-element-registries/](https://github.com/MicrosoftEdge/Demos/tree/main/scoped-custom-element-registries) | [Scoped Custom Element Registries](https://microsoftedge.github.io/Demos/scoped-custom-element-registries/) demo |
diff --git a/web-component-platform-behaviors/README.md b/platform-provided-behaviors-for-custom-elements/README.md
similarity index 62%
rename from web-component-platform-behaviors/README.md
rename to platform-provided-behaviors-for-custom-elements/README.md
index bf4510e..8af1b3a 100644
--- a/web-component-platform-behaviors/README.md
+++ b/platform-provided-behaviors-for-custom-elements/README.md
@@ -1,9 +1,9 @@
-# Web component platform behaviors
+# Platform-provided behaviors for custom elements
 
-➡️ **[Open the demo](https://microsoftedge.github.io/Demos/web-component-platform-behaviors/)** ⬅️
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/platform-provided-behaviors-for-custom-elements/)** ⬅️
 
 🔗 **Links:**
-* Explainer: [Platform-provided behaviors explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PlatformProvidedBehaviors/explainer.md)
+* Explainer: [Platform-provided behaviors for custom elements explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PlatformProvidedBehaviors/explainer.md)
 * WHATWG issue: [#12150](https://github.com/whatwg/html/issues/12150)
 * Spec PR: [whatwg/html#12409](https://github.com/whatwg/html/pull/12409)
 * Chromium bug: [crbug.com/486928684](https://crbug.com/486928684)
@@ -21,17 +21,17 @@ Platform-provided behaviors allow custom elements to adopt native HTML behaviors
 
 ## Learn more
 
-Read our [platform-provided behaviors explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PlatformProvidedBehaviors/explainer.md).
+To learn more, read our [platform-provided behaviors for custom elements explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PlatformProvidedBehaviors/explainer.md).
 
 ## Test the feature
 
-The feature is behind a flag and not yet enabled by default. To test it locally:
+The feature is not enabled by default yet. To test the feature:
 
-1. Use Microsoft Edge or another Chromium-based browser, version 149 or later.
-2. Navigate to `about://flags`.
-3. Search for **Experimental Web Platform features** and enable it.
-4. Restart the browser.
-5. Open this demo. If the feature is active, you will not see any warning banner at the top.
+* Use Microsoft Edge 149 or later, or another Chromium-based browser with a matching version.
+* In a new tab, go to the `about://flags` page.
+* Search for the flag named **Experimental Web Platform features**.
+* Enable the **Experimental Web Platform features** flag.
+* Restart the browser.
 
 ## Provide feedback
 
diff --git a/web-component-platform-behaviors/index.html b/platform-provided-behaviors-for-custom-elements/index.html
similarity index 87%
rename from web-component-platform-behaviors/index.html
rename to platform-provided-behaviors-for-custom-elements/index.html
index 95741c1..3dda226 100644
--- a/web-component-platform-behaviors/index.html
+++ b/platform-provided-behaviors-for-custom-elements/index.html
@@ -4,13 +4,13 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Web component platform behaviors</title>
+  <title>Platform-provided behaviors for custom elements</title>
   <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
   <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
-  <h1>Web component platform behaviors</h1>
+  <h1>Platform-provided behaviors for custom elements</h1>
   <p>
     Platform-provided behaviors allow custom elements to adopt native HTML
     behaviors through <code>attachInternals({ behaviors: [...] })</code>. The first
@@ -57,7 +57,7 @@ <h3>Form data submitted:</h3>
       <pre id="basic-data"></pre>
     </div>
     <p class="info-text">
-      <a href="https://github.com/AnaSkIM/Demos/blob/platform-behaviors/web-component-platform-behaviors/script.js#L13-L21">View source on GitHub</a>
+      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L13-L21">View source on GitHub</a>
     </p>
   </section>
 
@@ -90,7 +90,7 @@ <h3>Submission details:</h3>
       <pre id="overrides-data"></pre>
     </div>
     <p class="info-text">
-      <a href="https://github.com/AnaSkIM/Demos/blob/platform-behaviors/web-component-platform-behaviors/script.js#L23-L48">View source on GitHub</a>
+      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L23-L48">View source on GitHub</a>
     </p>
   </section>
 
@@ -117,7 +117,7 @@ <h3>Implicitly submitted:</h3>
       <pre id="implicit-data"></pre>
     </div>
     <p class="info-text">
-      <a href="https://github.com/AnaSkIM/Demos/blob/platform-behaviors/web-component-platform-behaviors/script.js#L50-L58">View source on GitHub</a>
+      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L50-L58">View source on GitHub</a>
     </p>
   </section>
 
@@ -153,7 +153,7 @@ <h3>Activated via keyboard:</h3>
     <p id="a11y-info" class="info-text">
       Inspect the custom element in DevTools. Its computed accessibility role is
       <code>button</code>, with no explicit ARIA attributes needed.
-      <a href="https://github.com/AnaSkIM/Demos/blob/platform-behaviors/web-component-platform-behaviors/script.js#L60-L68">View source on GitHub</a>
+      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L60-L68">View source on GitHub</a>
     </p>
   </section>
 
diff --git a/web-component-platform-behaviors/script.js b/platform-provided-behaviors-for-custom-elements/script.js
similarity index 100%
rename from web-component-platform-behaviors/script.js
rename to platform-provided-behaviors-for-custom-elements/script.js
diff --git a/web-component-platform-behaviors/style.css b/platform-provided-behaviors-for-custom-elements/style.css
similarity index 86%
rename from web-component-platform-behaviors/style.css
rename to platform-provided-behaviors-for-custom-elements/style.css
index a67faef..98db059 100644
--- a/web-component-platform-behaviors/style.css
+++ b/platform-provided-behaviors-for-custom-elements/style.css
@@ -65,8 +65,10 @@ html {
 
 body {
   max-inline-size: 800px;
-  margin: 0 auto;
-  padding: 2rem;
+  margin-inline: auto;
+  margin-block: 0;
+  padding-block: 2rem;
+  padding-inline: 2rem;
   background: var(--color-bg);
   color: var(--color-text);
   line-height: 1.6;
@@ -83,7 +85,8 @@ body > p {
 
 h2 {
   font-size: 1.3rem;
-  margin: 0 0 1rem 0;
+  margin-block: 0 1rem;
+  margin-inline: 0;
   border-block-end: 1px solid var(--color-border-light);
   padding-block-end: 1rem;
 }
@@ -98,7 +101,8 @@ kbd {
   font-family: Consolas, "Courier New", monospace;
   font-size: 0.9em;
   background: var(--color-code-bg);
-  padding: 0.15em 0.35em;
+  padding-block: 0.15em;
+  padding-inline: 0.35em;
   border-radius: 3px;
 }
 
@@ -119,7 +123,8 @@ a {
   background: var(--color-warning-bg);
   border: 1px solid var(--color-warning-border);
   border-radius: 6px;
-  padding: 0.75rem 1rem;
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
   margin-block: 1rem;
   color: var(--color-warning-text);
 }
@@ -127,7 +132,8 @@ a {
 .demo-section {
   margin-block-end: 2rem;
   background: var(--color-surface);
-  padding: 1rem;
+  padding-block: 1rem;
+  padding-inline: 1rem;
   border-radius: 6px;
 }
 
@@ -151,7 +157,8 @@ a {
 input[type="text"],
 input[type="email"] {
   inline-size: 100%;
-  padding: 0.6rem 0.75rem;
+  padding-block: 0.6rem;
+  padding-inline: 0.75rem;
   border: 1px solid var(--color-border);
   border-radius: 6px;
   font-size: 1rem;
@@ -175,7 +182,8 @@ a11y-submit-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem 1.25rem;
+  padding-block: 0.5rem;
+  padding-inline: 1.25rem;
   border: 2px solid var(--color-accent);
   border-radius: 6px;
   background: var(--color-accent);
@@ -222,17 +230,20 @@ a11y-submit-button:focus-visible {
   background: var(--color-surface-alt);
   border: 1px solid var(--color-border);
   border-radius: 6px;
-  padding: 0.75rem 1rem;
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
 }
 
 .output h3 {
-  margin: 0 0 0.5rem 0;
+  margin-block: 0 0.5rem;
+  margin-inline: 0;
   font-size: 0.9rem;
   color: var(--color-muted);
 }
 
 .output pre {
-  margin: 0;
+  margin-block: 0;
+  margin-inline: 0;
   font-family: Consolas, "Courier New", monospace;
   font-size: 0.85rem;
   white-space: pre-wrap;

From e4c729810ab6cba3fc776f370449981247d03f42 Mon Sep 17 00:00:00 2001
From: Ana Sollano Kim <ansollan@microsoft.com>
Date: Fri, 8 May 2026 10:54:27 -0700
Subject: [PATCH 3/3] Fix View source line number ranges to match actual code

---
 .../index.html                                            | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/platform-provided-behaviors-for-custom-elements/index.html b/platform-provided-behaviors-for-custom-elements/index.html
index 3dda226..2512fc5 100644
--- a/platform-provided-behaviors-for-custom-elements/index.html
+++ b/platform-provided-behaviors-for-custom-elements/index.html
@@ -57,7 +57,7 @@ <h3>Form data submitted:</h3>
       <pre id="basic-data"></pre>
     </div>
     <p class="info-text">
-      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L13-L21">View source on GitHub</a>
+      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L11-L20">View source on GitHub</a>
     </p>
   </section>
 
@@ -90,7 +90,7 @@ <h3>Submission details:</h3>
       <pre id="overrides-data"></pre>
     </div>
     <p class="info-text">
-      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L23-L48">View source on GitHub</a>
+      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L22-L45">View source on GitHub</a>
     </p>
   </section>
 
@@ -117,7 +117,7 @@ <h3>Implicitly submitted:</h3>
       <pre id="implicit-data"></pre>
     </div>
     <p class="info-text">
-      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L50-L58">View source on GitHub</a>
+      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L47-L56">View source on GitHub</a>
     </p>
   </section>
 
@@ -153,7 +153,7 @@ <h3>Activated via keyboard:</h3>
     <p id="a11y-info" class="info-text">
       Inspect the custom element in DevTools. Its computed accessibility role is
       <code>button</code>, with no explicit ARIA attributes needed.
-      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L60-L68">View source on GitHub</a>
+      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L58-L67">View source on GitHub</a>
     </p>
   </section>