[BUG] CSS from parent page leaking into CSUI (Vue)

[JoshuaPerk]

What happened?

When building a basic CSUI (with Vue), default config - the CSS from the parent page is leaking into the shadow/root component. My understanding is this should not be the default behavior.

Image of result

Code:

<template>
  <div class="h-72 w-72 bg-red-500 fixed top-0 right-0">
    <h1 class="font-sm text-sm">This is a test</h1>
  </div>
</template>

<script>
import cssText from "data-text:~style.css"

export default {
  plasmo: {
    config: {
      matches: ["<all_urls>"]
    },
    // Tailwind CSS must be injected into the parent component
    getStyle: () => {
      const style = document.createElement("style")
      style.textContent = cssText
      return style
    }
    // getOverlayAnchorList: async () => document.querySelectorAll("a")
  }
}
</script>

<style>
#plasmo-shadow-container {
  position: relative;
}
</style>

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

This is the case with tailwind since it consumes the same style. Simply add a namespace to your tw config