Search code examples
javascriptcsstypescriptlitshoelace

Lit: Overriding child component CSS given an @property field

I have a lit component (e.g tc-tooltip) where in some cases I'd like to remove its arrow by overriding its CSS as described in the shoelace docs

Is there a way to do this? I thought I could create a property in the lit component class e.g

@property({ type: Boolean })
hasArrow = true;

and to try to change the styles by checking for when the component's hasArrow property is set to false

removeArrow() {
   if (this.hasArrow === false) {
      styles.push(css`
        sl-tooltip::part(base) { --sl-tooltip-arrow-size: 0;" }`);
    }
    styles.push(prepareStyles(styles)):
  }

but I can't get it to work. Any tips appreciated!

Solution

  • It's hard to say without seeing the full code with what styles is and how removeArrow() is being called.

    One potential source of problem could be that boolean reactive properties should not be defaulted true as they may have unintended behavior and may not turn false. So you should default it to false.

    @property({ type: Boolean })
hasArrow = false;

    See https://github.com/lit/lit.dev/issues/744.

    Also consider using classMap or styleMap for dynamic styling based on some property. https://lit.dev/docs/components/styles/#dynamic-classes-and-styles