demo · v150

Shadow DOM Scope

The autocorrect attribute inherits through the DOM tree, including across shadow DOM boundaries. A host element with autocorrect="off" passes the inherited value into the shadow root's editable descendants. Shadow DOM components can also set their own autocorrect explicitly to override the inherited value.

Light DOM inputs inherit autocorrect from their nearest ancestor. Shadow DOM inputs inherit from the shadow host element — the host's attribute value crosses the shadow boundary. A shadow component can still override it explicitly inside the shadow root.

Host autocorrect:

Light DOM inheritance

<div id="host" autocorrect="off"> inherit
on (explicit)
off (explicit)

IDL .autocorrect: —

Shadow DOM inheritance

<div autocorrect="off"> (host)

#shadow-root (open)

Shadow input IDL .autocorrect: —

Element	autocorrect attr	Host value	Effective	IDL .autocorrect

// Shadow DOM component that respects inherited autocorrect
class CommentInput extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>input { font-family: monospace; }</style>
      <!-- No explicit autocorrect — inherits from host element -->
      <input type="text" placeholder="Comment (inherits autocorrect)">

      <!-- Override: always off inside this component's code editor -->
      <input type="text" autocorrect="off" placeholder="Code field (always off)">
    `;
  }
}

customElements.define('comment-input', CommentInput);

// Usage: set autocorrect on the host to affect all shadow inputs
document.querySelector('comment-input').setAttribute('autocorrect', 'off');
// or: document.querySelector('comment-input').autocorrect = 'off';

// The shadow input without an explicit attribute now inherits 'off'
// from the host element, just like light DOM children do.
// The explicit autocorrect="off" code field is unaffected.

see also