Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kadoshms opened this issue May 30, 2024 · 0 comments
Open

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

kadoshms opened this issue May 30, 2024 · 0 comments
Labels
🐞 Bug Bug or Bug fixes

Comments

@kadoshms
Copy link

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

@kadoshms kadoshms added the 🐞 Bug Bug or Bug fixes label May 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 Bug Bug or Bug fixes
Projects
None yet
Development

No branches or pull requests

1 participant