0

The issue here is I have lit element components that get wrapped in React using lit-labs-react. I have 1 component working with styles and rendering successfully. Then adding another component causes the error below. Seems to only happen when using components in storybook. Has anyone came across this issue in storybook before? I would've thought since these styles are encapsulated within the shadowDOM, it wouldn't have these issues. Maybe a loading/timing issue of when the styles apply?

The error:

css-tag.ts:143 Uncaught TypeError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet'.

Within the component here is how lit element loads styles:

import TextareaStyles from "./textarea.scss";

static get styles() {
    return [TextareaStyles];
}

The usage:

import React from "react";
import { createComponent } from "@lit-labs/react";
import { Textarea } from "@bitdev/textarea";

export const Textarea = createComponent({
  tagName: "textarea",
  elementClass: Textarea,
  react: React,
  events: {
    oninput: "event-textarea-on-input",
  },
});

Then adding this within MDX file for preview like so:

import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';

import { Textarea } from "./textarea.component";

<Canvas>
  <Story name="Textarea">
    <Textarea rows={7}></Textarea>
  </Story>
</Canvas>
Kyle
  • 55
  • 1
  • 8
  • This could depend on how the .scss file import is being processed since that's not a native JS feature. Without special tooling, Lit expects the style being passed in to be written with the css tag function. https://lit.dev/docs/components/styles/#sharing-styles – Augustine Kim Jan 12 '23 at 18:40
  • Good point. Checked the output of the compiled components and coming back incorrectly. `[button_scss_1.default];` This would be mean on the consuming side, would need to use some sort of loader like lit-scss-loader, to be able to read the styles correctly. Would be better within bitdev to create a compiler for scss->css. But unsure how. – Kyle Jan 16 '23 at 00:21
  • I'm not too familiar bitdev but perhaps how they do it for material web components might give some idea. https://github.com/material-components/material-web There's a npm script that runs sass compiler outputting css files, which are turned into .ts files wrapping the content in `css` tag function with the `css-to-ts.js` script. – Augustine Kim Jan 18 '23 at 21:12

0 Answers0