Skip to content
New issue

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

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

Already on GitHub? # 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
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
🐞 Bug Bug or Bug fixes
Projects
None yet
Development

No branches or pull requests

1 participant