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!