✨ Runtime CSS Decorator for custom elements

[1aron]

Description

Current

import { customElement } from 'lit/decorators.js'
import MasterCSS from '@master/css'
import config from '../master.css'

@customElement('my-element')
export class MyElement extends LitElement {
    css: MasterCSS

    connectedCallback() {
        super.connectedCallback()
        this.css = new MasterCSS({
            ...config,
            observe: false
        }).observe(this.shadowRoot)
    }

    disconnectedCallback() {
        super.disconnectedCallback()
        this.css?.destroy()
    }
}

Expect

import { customElement } from 'lit/decorators.js'
import { runtimeCSS } from '@master/css'
import config from '../master.css'

@customElement('my-element')
@cssRuntime(config)
export class MyElement extends LitElement {}

[adonig]

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 @r2wc/react-to-web-component, and I’ve been running into a lot of friction trying to make Tailwind CSS work reliably inside the Shadow DOM. I came across MasterCSS while researching alternatives and noticed references to shadowRoot in various issues and discussions here.

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:
Would it be possible (and advisable) to replace Tailwind with MasterCSS in this setup?
If so, what’s the recommended way to initialize MasterCSS for a shadow-rooted Web Component like the one above?

Thanks again for your work - the runtime design and utility-first approach of MasterCSS looks very promising for Web Components.

[1aron]

@adonig You might be looking for this example: https://github.com/master-co/css/blob/rc/examples/lit/src/my-element.ts