Tailwind CSS, DaisyUI: Styles may be missing (incomplete) within Shadow Roots.

[tangxiaoqi-tangxiao]

style.css：

@import "tailwindcss";

@plugin "daisyui" {
    themes: light --default;
}

content.js:

import { createApp } from 'vue';
import App from './PanelApp.vue';
import './style.css';

export default defineContentScript({
  matches: ['<all_urls>'],
  // 2. Set cssInjectionMode
  cssInjectionMode: 'ui',

  async main(ctx) {
    // 3. Define your UI
    const ui = await createShadowRootUi(ctx, {
      name: 'example-ui',
      position: 'inline',
      anchor: 'body',
      mode: "closed",
      append: "last",
      onMount: (uiContainer, shadow) => {
        // Define how your UI will be mounted inside the container
        const app = createApp(App);
        app.mount(uiContainer);
        return app;
      },
      onRemove: (app) => {
        // Unmount the app when the UI is removed
        app?.unmount();
      },
    });

    // 4. Mount the UI
    ui.mount();
  },
});

DaisyUI Official Styles:

My Styles:

Shadow is missing.

[tangxiaoqi-tangxiao]

vue：

    <div class="card bg-base-100 w-96 shadow-sm">
      <figure>
        <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" alt="Shoes" />
      </figure>
      <div class="card-body">
        <h2 class="card-title">Card Title</h2>
        <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
        <div class="card-actions justify-end">
          <button class="btn btn-primary">Buy Now</button>
        </div>
      </div>
    </div>

[aklinker1]

This is probably caused by tailwindlabs/tailwindcss#15005

Borders don't seem to work inside createShadowRootUi :/

[aklinker1]

I've added an issue to track this: #1461