dev-examples/shadow-dom-web-component/index.html
Two independent <lexical-editor> custom elements, each fully encapsulated in its own open shadow root — toolbar, styles and contentEditable included. No React, no frameworks. They are form-associated via ElementInternals , so submitting the form below collects each editor's serialized state. The first editor uses the standard required attribute, so the form refuses to submit while it is empty. The second editor is themed entirely from the page through inherited CSS custom properties — the editor's internal styles stay private, but the page can recolour every surface from outside.
Notes (required)Clear This field can't be empty. Summary Lock the summary editor (sets the standard readonly attribute) Make the summary editor inert (focus, pointer events and selection skip the subtree — crosses the shadow boundary on its own)
Last edited: (none)
Submit formReset form
Pre-rendered (declarative shadow DOM) pre-rendered text
Nested shadow (page → wrapper shadow → editor shadow)
B _I_U