feat: Support injection into shadow DOM components

[rxliuli]

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