demo · v133

Slotted Mouse Focus

A custom element with a shadow root and a <slot>. The light-DOM input is slotted into it. Click the input — Chrome 133+ correctly focuses the input itself, not the shadow host.

component (light DOM input slotted into shadow root)

tap or click the input; the gauges below show who actually has focus.

document.activeElement.tagName
—
activeElement.id / id-on-host
—
Pre-133 bug: clicking inside the slot focused my-card (the host). Post-133, focus lands on #slotted.

the code

class MyCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).innerHTML = `<slot></slot>`;
  }
}
customElements.define("my-card", MyCard);

// <my-card><input></my-card>  -- click the input

see also