How to load css from tailwind inside shadowRoot ?

[samulefevre]

Hello, good job and thank you for this plugin. I am trying to load css from tailwindcss inside shadow dom but it is not working.

// content-script.js
const shadowHost = document.createElement('div')
shadowHost.id = 'myhost'
shadowHost.attachShadow({ mode: 'open' })

document.documentElement.appendChild(shadowHost)

let link = document.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = chrome.extension.getURL('css/content-script.css') // added it in manifest.json web_accessible_resources

shadowHost.shadowRoot.appendChild(link)

const appRoot = document.createElement('div')
shadowHost.shadowRoot.appendChild(appRoot)

...

import '@/assets/tailwind.css'
const app = createApp(App)
app.mount(appRoot)

// vue.config.js (cli 4.5.9)
module.exports = {
  filenameHashing: false,
  css: {
    extract: true,
    loaderOptions: {}
  },

  pluginOptions: {
    browserExtension: {
      componentOptions: {
        contentScripts: {
          entries: {
            'content-script': ['src/content-scripts/content-script.js']
          }
        }
      }
    }
  },

  pages: {}
}

Maybe like https://medium.com/rate-engineering/winning-the-war-of-css-conflicts-through-the-shadow-dom-de6c797b5cba. but is is for react

rules: [
  // Other webpack modules
  ...
  {
    test: /\.css$/,
    use: [
      {
        loader: require.resolve('style-loader'),
        options: {
          insertInto: function () {
            return document.getElementById('root').shadowRoot;
          },
        },
      },

    ],
  },
  ...
],

I was not able to do the same thing in vue cli 4

[cobreen]

Hello! What was the solution?

[dnnp2011]

I'm also dealing with this issue. Tailwind and scoped styles are not being automatically injected into my app mounted on the shadow DOM.

[samulefevre]

Hello !

In content script i added :

...

const shadow = shadowHost.attachShadow({ mode: 'open' })

shadow.innerHTML = `

<style>
:host {
  all: initial;
}
</style>
`

const linkElem = document.createElement('link')
linkElem.setAttribute('rel', 'stylesheet')
linkElem.setAttribute('href', browser.runtime.getURL('css/content-script.css'))

shadow.appendChild(linkElem)