[Bug]: withTwind doesn't play nicely with Light DOM Lit elements

[kadoshms]

Reproduction

Easily reproduced here - https://lit.dev/playground/#gist=9f528bbbee8cae07407a88d25a1f7910

Describe the bug

Seems like Lit Elements that are not rendered inside a shadow dom seem to not work properly.
One thing I noticed in the code was that getShadowRoot creates a shadow root if such not exists, which is problematic in cases we create elements with Lit DOM, such as the one in the gist:

import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import { defineConfig } from '@twind/core'
import install from '@twind/with-web-components';

const config = defineConfig({});
const WithTwind = install(config);

@customElement('simple-greeting')
export class SimpleGreeting extends WithTwind(LitElement) {
  static styles = css`
    :host {
      display: block;
      border: solid 1px red;
      background: @apply bg-blue-500;
    }
  `;
  
  createRenderRoot() {
    return this;
  }

  @property()
  name = 'World';

  render() {
    return html`<h2>Hello, ${this.name}</h2>`;
  }
}

Severity

annoyance

System Info

Latest

Additional Information

No response

[stale]

Hey folks. This issue hasn't received any traction for 90 days, so we're going to close this for housekeeping. If this is still an ongoing issue, please do consider contributing a Pull Request to resolve it. Further discussion is always welcome even with the issue closed. If anything actionable is posted in the comments, we'll consider reopening it. ⓘ