How to style host and slot elements with Lit

[rolznz]

The documentation for lit https://twind.style/with-lit only provides an example of how to use tailwind classes in the render function, but there seems to be no way to style the :host element without using standard css. Passing classes to a slot element seems to also do nothing.

Are there any example of these?

Thanks!

[luk82]

It's possible to add classes to host element with one of the lifecycle methods, such as firstUpdate(). It executes tasks that need to be performed once the component's DOM has been created. Below will add 'tw-class' to host element.

firstUpdated() { this.classList.add("tw-class"); }

Another way is to style :host element when component property is set. :host([theme="orange"]) { background: @apply bg-blue-500 }

[justinfagnani]

I wouldn't have a host modify it's own class attribute. That will collide with uses of the element setting classes themselves. In general, a host's attribute's don't "belong" to the host, they belong to the container of the host.

@luk82

Another way is to style :host element when component property is set. :host([theme="orange"]) { background: @apply bg-blue-500 }

What does that mean concretely? Like this:

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;
    }
  `;

  @property()
  name = 'World';

  render() {
    return html`<h2>Hello, ${this.name}</h2>`;
  }
}

because the @apply doesn't seem to be applied here: https://lit.dev/playground/#gist=a94d06fef193bfaace436fd81b2d6817

@rolznz

Passing classes to a slot element seems to also do nothing.

This is probably because <slot> is display: content by default. If you set it to display: block, etc., it should work.