Extending from vaadin-tooltip, styling seems not to work

General
1

I want to use/create a custom web element which extends from the vaadin-tooltip.

export class CustomTooltip extends Tooltip {
  static get is() {
    return 'custom-tooltip';
  }

}

window.customElements.define(CustomTooltip.is, CustomTooltip);

And with register styles I want to to customize the styles

registerStyles('vaadin-tooltip-overlay', css`
  :host {
      background: yellow;
      color: #fff
      opacity: var(--custom-tooltip-opacity, 1);
      text-align: center;
      border-radius: 2px;
      line-height: 1;
  }

  [part='content'] {
      padding: 8px;
  }

But this gives an error:

Cannot set properties of null (setting 'textContent')
    at updateComponentStyles (vaadin-themable-mixin.js:169:59)

How can I set the styles when extending the tooltip?
I did this with a lot of other Vaadin-components, but here it seems not to work

Thanks in advance.

2

Could you please create a repo with a reproduction example? I’m unable to reproduce the issue using the code you provided.

Also, based on the error, the problem comes from ThemableMixin trying to update the component instance dynamically, which means you register styles after the component is finalized. This is generally not recommended, it’s better to use the following order:

<script type="module">
  import { Tooltip } from '@vaadin/tooltip/vaadin-tooltip.js';
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin';

  // First register styles
  registerStyles(
    'vaadin-tooltip-overlay',
    css`
      [part='content'] {
        padding: 8px;
      }
  `,
  );

  // Then register a component
  export class CustomTooltip extends Tooltip {
    static get is() {
      return 'custom-tooltip';
    }
  }

  customElements.define(CustomTooltip.is, CustomTooltip);
</script>
3

Thanks this works. I was importing an old polymer demo-snippet. Removing that solved the issue. (still strange)

<script type="module" src="../node_modules/@polymer/iron-demo-helpers/demo-snippet.js"></script>

I can make a new request, but now I want for this custom-tooltip, or the vaadin-tooltip, to set the background for tooltips with a certain class. That also seems not to be possible.

Code in component

registerStyles('vaadin-tooltip-overlay', css`
      [part='overlay'] {
          background: var(--custom-tooltip-background, #333);
          color: var(--custom-tooltip-text-color, #fff));   
      }

      [part='content'] {
          padding: 8px;
      }
`);

Code in html works

<style>
   vaadin-tooltip-overlay::part(overlay) {
 --custom-tooltip-background: red; 
}
</style>

<body>
          <button id="button-1">Button</button>
          <gm-tooltip class="custom-color" for="button-1" text="The button"></gm-tooltip>

          <button id="button-2">Button</button>
          <gm-tooltip for="button-2" text="The button normal color"></gm-tooltip>

</body>

But how to change the color for the custom-color class?

4

Use overlay-class to propagate the class name to the tooltip overlay:

<gm-tooltip overlay-class="custom-color" for="button-1" text="The button"></gm-tooltip>

Then the CSS rule is:

vaadin-tooltip-overlay.custom-color {
  --custom-tooltip-background: red; 
}
5

Thanks, that is the solution.