v149 · custom elements · developer trial
Platform-provided behaviors for custom elements
Extends ElementInternals to let autonomous custom elements opt in to a list of named native behaviors — things like listbox semantics, checkbox state management, or text-field editing — without subclassing built-in elements or re-implementing complex logic from scratch.
chrome://flags/#enable-experimental-web-platform-features. The behavior identifier names are early-stage and will likely change before shipping.
at a glance
| Status in 149 | In developer trial (behind a flag) |
|---|---|
| Flag | chrome://flags/#enable-experimental-web-platform-features |
| Standards position | Firefox: No signal · Safari: No signal |
| Spec / PR | whatwg/html PR #12409 |
| Blink component | Blink>HTML>CustomElements |
| ChromeStatus | 6035800057839616 — Platform-provided behaviors for custom elements |
why it exists
Customized built-in elements (class MyButton extends HTMLButtonElement) are the existing escape hatch for adopting native behaviors in a custom element — but the pattern is blocked by Safari and involves extending prototypes in ways that conflict with some frameworks. Autonomous custom elements (class MyEl extends HTMLElement) work everywhere but have to re-implement every behavior from scratch. Platform-provided behaviors are a third path: the author writes an autonomous custom element, calls internals.behaviors = ["listbox"] in attachInternals, and the browser grafts in the native listbox behavior (keyboard navigation, selection model, ARIA, scrolling) without requiring element subclassing.
shape of the API
attachInternals with behaviors
| el.attachInternals({ behaviors: [...] }) | Passes a list of named behavior strings to the internals object. The browser installs the requested behaviors on the element. Can only be called once per element lifetime. |
|---|---|
| ElementInternals.behaviors | Read-back of the installed behavior list. |
Behavior identifiers (early-stage)
"listbox" | Provides listbox keyboard navigation, selection model, and ARIA roles. |
|---|---|
"checkbox" | Toggle state management, indeterminate support, form participation. |
"textfield" | Text editing, clipboard, IME, form participation. |
The identifier set is not final. Behavior availability can be queried at runtime.
Source: chromestatus summary + whatwg/html PR #12409. Names paraphrased.example
class FancySelect extends HTMLElement {
#internals;
constructor() {
super();
// Request listbox behavior at construction time
this.#internals = this.attachInternals({ behaviors: ["listbox"] });
this.attachShadow({ mode: "open" });
}
connectedCallback() {
this.shadowRoot.innerHTML = `
<slot></slot>
`;
// The browser manages keyboard nav, selection, and ARIA role
// based on the "listbox" behavior — no manual event handling needed
}
}
customElements.define("fancy-select", FancySelect);browser support
| Chrome | 149 — developer trial (flag required) |
|---|---|
| Edge | Tracking Chromium |
| Firefox | No signal |
| Safari | No signal |