Description
Describe the feature in detail (code, mocks, or screenshots encouraged)
When I develop browser plugins to inject UI into web pages, I usually choose to use shadow DOM as a CSS isolation solution, while JavaScript is not isolated, so it will by default modify the class of the root document of the web page. Is it possible to add a property similar to the Dialog component in shadcn/ui that allows configuring the modification of a specific shadow DOM's document?
Current solution
import { ModeWatcher, mode } from 'mode-watcher'
$effect(() => {
const root = document
.querySelector('mass-block-twitter')
?.shadowRoot?.querySelector('html')
const current = $mode
if (root) {
root.className = `color-scheme: ${current}`
}
})What type of pull request would this be?
Enhancement
Provide relevant links or additional information.
shadcn/ui Dialog: https://next.bits-ui.com/docs/components/dialog#dialogportal