Open
Description
Heya,
Context:
I've been experiencing some issues with application css messing up the toolbar.
Putting the component into a shadowdom would fix this issue, and since ddt doesn't interact with the rest of the page it would be a good fit I think.
A comparatively simple approach would be declarative shadow dom using something like this:
<div id="djDebug" ...>
<template shadowrootmode="open">
<link rel="stylesheet" ...>
...
</template>
</div>The main div still needs to be positioned in the context of the page, but the stuff inside the template would be shielded from the outside css.
Since ddt also uses some javascript, maybe a custom element might be a good call. Here's an example inspired by https://web.dev/articles/declarative-shadow-dom
<django-debug-toolbar>
<template shadowrootmode="open">
<button>
<slot></slot>
</button>
</template>
Open Menu
</django-debug-toolbar>
<script>
class DjangoDebugToolbar extends HTMLElement {
constructor() {
super();
// Do all the javascript stuf here, `this` is the django-debug-toolbar element
// and this.shadowRoot is already set up.
}
}
customElements.define('django-debug-toolbar', DjangoDebugToolbar);
</script>I was thinking about this and didn't find anything, so I thought I'd start a discussion about this here.
Metadata
Assignees
Labels
No labels