Docs Cases Scenarios Playground Coverage

Cas ce-0051 · Scénario scenario-contenteditable-shadow-dom

contenteditable does not work correctly inside Shadow DOM

OS: macOS Ubuntu 22.04 Appareil: Desktop or Laptop Any Navigateur: Chrome 120.0 Clavier: US Brouillon
shadow-domcontenteditableisolationchrome

Cette page n'a pas encore été traduite

Le contenu original en anglais est actuellement affiché. Nous apprécierions votre contribution à la traduction.

Contribuer à la traductionVoir l'original en anglais

Phenomenon

When a contenteditable region is inside a Shadow DOM, its behavior may be broken or inconsistent. Selection, focus, and editing may not work as expected.

Reproduction example

  1. Create a custom element with Shadow DOM.
  2. Inside the Shadow DOM, create a contenteditable div.
  3. Try to interact with the contenteditable (type, select, etc.).
  4. Observe the behavior.

Observed behavior

  • In Chrome on macOS, contenteditable may not work correctly inside Shadow DOM.
  • Selection may be broken.
  • Focus may not work.
  • Events may not fire correctly.

Expected behavior

  • contenteditable should work correctly inside Shadow DOM.
  • Selection and focus should work as expected.
  • Events should fire and bubble correctly.

Playground for this case

Use the reported environment as a reference and record what happens in your environment while interacting with the editable area.

Reported environment
OS: macOS Ubuntu 22.04
Device: Desktop or Laptop Any
Browser: Chrome 120.0
Keyboard: US
Your environment

Use this editable area to reproduce the described case.

Event log
Use this log together with the case description when filing or updating an issue.
0 events
Interact with the editable area to see events here.