0

lit-element completely encapsulates CSS and the only way to style components is via custom CSS variables.

When using tailwindcss all styles are applied via classes, and I currently don't see a way to inject those classes from the outside world.

What I would like to achieve is to make the custom lit-component completely unaware of tailwind. It should only do the most basic styling but leave the customisation up to the user of the component.

The only solution I see right now is to provide the classes via a property and then apply them using classMap. But I don't know where users would like to apply those classes and adding them to each element is unfeasible (and unmaintainable). In addition, I have my doubts that tailwind would even work in that case due to the style-encapsulation.

exhuma
  • 20,071
  • 12
  • 90
  • 123

1 Answers1

1

It sounds like you want your users to be able add classes to specific parts within the custom element you authored?

If it works with what your component's trying to do, the best way to achieve that would be to place slots in your component and have the user provide the element to fill those slots as children to your component. That way the user directly controls what classes they want to put on it and the styling will apply as the children would be part of the light DOM.

As you've said, providing classes via property would be clunky API and styling won't apply unless you forego using shadow DOM by overriding createRenderRoot which is not recommended.

CSS custom properties are not the only way to allow users to style parts of your component as you can also add part attributes letting the user use ::part() pseudo-element to style them. If your users can write CSS instead of providing tailwind classes, that would be the way to give users some control of styling your component. See https://developer.mozilla.org/en-US/docs/Web/CSS/::part

Augustine Kim
  • 841
  • 1
  • 5
  • I did not know about `::part` yet and I think this is a good option. That way, users should be able to use the tailwind `@apply` rule. Slots would work too, but they serve a different purpose and I would avoid doing that. Thank you for the pointers. – exhuma Aug 19 '22 at 06:05