Skip to content

Use shadow dom to render the toolbar #2266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
matthiask merged 9 commits into from
Apr 23, 2026
Merged

Use shadow dom to render the toolbar #2266

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
89960a5
Use shadow dom to render the toolbar
federicobond Nov 26, 2025
d75cd33
Change shadow root element ID for fetching debug element
tim-schilling Dec 3, 2025
46e3abf
Add USE_SHADOW_DOM setting to opt-out to shadow DOM toolbar rendering
federicobond Dec 10, 2025
9c5fe81
Use JSDoc format for comments
federicobond Apr 22, 2026
fd7bc05
Add a note about the changed selector for CSS variables
federicobond Apr 22, 2026
aef37bf
Update frontend tests for new shadow DOM structure
federicobond Apr 22, 2026
a5d6a9e
Update changelog
federicobond Apr 22, 2026
b86e123
Add lookups to spelling wordlist
federicobond Apr 22, 2026
d709c1e
Merge branch 'main' into shadowdom
matthiask Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add a note about the changed selector for CSS variables
  • Loading branch information
@federicobond
federicobond committed Apr 22, 2026
commit fd7bc05e1e819c340d22b104fb83840acfc277ed
7 changes: 7 additions & 0 deletions docs/configuration.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -501,3 +501,10 @@ could add a **debug_toolbar/base.html** template override to your project:
The list of CSS variables are defined at
`debug_toolbar/static/debug_toolbar/css/toolbar.css
<https://github.com/django-commons/django-debug-toolbar/blob/main/debug_toolbar/static/debug_toolbar/css/toolbar.css>`_

.. note::

The selector used to declare the toolbar's CSS variables changed from
``:root`` to ``#djDebug`` when the toolbar moved to rendering inside a
shadow DOM. If you were previously overriding these variables on
``:root``, update your styles to target ``#djDebug`` instead.
Loading