Replies: 1 comment 1 reply
-
|
Hello @1aron! Thank you for providing us with this great library - it looks like exactly the kind of solution I’ve been looking for. I’m currently building a React-based Web Component using I’m trying to understand how MasterCSS can be used inside a Shadow DOM, and whether it would be a good replacement for Tailwind in this context. Here’s what I currently do in my Vite project to patch Tailwind styles manually into the shadow root: import r2wc from '@r2wc/react-to-web-component'
import { Widget } from './components'
import styles from './index.css?inline'
const WebComponent = r2wc(Widget, {
props: {},
shadow: 'open',
})
const OriginalConnectedCallback = WebComponent.prototype.connectedCallback
WebComponent.prototype.connectedCallback = function () {
OriginalConnectedCallback.call(this)
if (styles) {
const scopedStyles = styles.replace(/:root/g, ':host') // patch Tailwind for shadow DOM
const style = document.createElement('style')
style.textContent = scopedStyles
this.shadowRoot!.prepend(style)
}
}
customElements.define('my-widget', WebComponent)My question: Thanks again for your work - the runtime design and utility-first approach of MasterCSS looks very promising for Web Components. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Description
Current
Expect
Beta Was this translation helpful? Give feedback.
All reactions