Конфигурация Twind не работает с LitElement

Question

Я не могу заставить тему работать с LitElement. Я могу установить другие реквизиты установки без проблем, но тема не распознается Twind. Также стоит отметить, что при компиляции я не получаю ошибок. У кого-нибудь есть быстрое решение?

      import {LitElement, html} from 'lit';
import {setup, warn, create, cssomSheet} from 'twind';

setup({
  mode: warn,
  theme: {
    colors: {
      purple: '#2013',
    },
  },
});

const sheet = cssomSheet({target: new CSSStyleSheet()});
const {tw} = create({sheet});

export class MyApp extends LitElement {
  static styles = [sheet.target];

  static get properties() {
    return {
      name: {type: String},
    };
  }

  constructor() {
    super();
    this.name = 'World';
  }

  render() {
    return html` <h1 class="${tw`text(3xl purple)`}">${this.name}!</h1> `;
  }
}

window.customElements.define('my-app', MyApp);

Answer 1

Вероятно, проблема в shadow-dom. Если вы можете использовать Twind, вы можете попробовать выполнить рендеринг в light-dom, а не в shadow-dom.

Чтобы использовать light-dom, добавьте в свой класс веб-компонента этот метод:

      createRenderRoot() {
  return this;
}

С другой стороны, я не уверен, что это работает без Лит...