Class StyleInjector

packages/dom/src/core/plugins/stylesheet/StyleInjector.ts:23–261

>();

export class StyleInjector extends CorePlugin<
  DragDropManager,
  StyleInjectorOptions
> {
  #registeredRules = new Set<string>();

  @reactive
  private accessor additionalRoots = new Set<Document | ShadowRoot>();

  constructor(manager: DragDropManager, options?: StyleInjectorOptions) {
    super(manager, options);

    this.registerEffect(this.#syncStyles);
  }

  /**
   * Registers CSS rules to be injected into the active drag operation's
   * document and shadow roots. The StyleInjector handles tracking
   * which roots need the styles and cleaning up when they're no longer needed.
   *
   * Returns a cleanup function that unregisters the rules.
   */
  public register(cssRules: string): CleanupFunction {
    this.#registeredRules.add(cssRules);

    return () => {
      this.#registeredRules.delete(cssRules);
    };
  }

  /**
   * Adds an additional root to track for style injection.
   * Returns a cleanup function that removes the root.
   */
  public addRoot(root: Document | ShadowRoot): CleanupFunction {
    untracked(() => {
      const roots = new Set(this.additionalRoots);
      roots.add(root);
      this.additionalRoots = roots;
    });

    return () => {
      untracked(() => {
        const roots = new Set(this.additionalRoots);
        roots.delete(root);
        this.additionalRoots = roots;
      });
    };
  }

  @derived
  private get sourceRoot() {
    const {source} = this.manager.dragOperation;
    return getRoot(source?.element ?? null);
  }

  @derived
  private get targetRoot() {