[themable-mixin] Theme module for both vaadin-grid and vaadin-grid-pro doesn't apply to both

[pekam]

<dom-module id="foo" theme-for="vaadin-grid vaadin-grid-pro">
  <template>
    <style>
      [part~="cell"] {
        background: red;
      }
    </style>
  </template>
</dom-module>

Expected: <vaadin-grid> and <vaadin-grid-pro> both have red cells
Actual outcome: only <vaadin-grid> elements have red cells

Both elements have <style include="foo"></style> inside their shadow roots.

Discovered in: https://vaadin.com/forum/thread/17885978/theme-issue-for-gridpro-and-grid

[pekam]

The problem is in the order of including the styles. In normal case, the user-defined modules are loaded after the default styles. But because of extending grid, grid-pro includes styles in this order:

1. include lumo styles for grid
2. include foo for grid
3. include lumo styles for grid-pro
4. try to include foo for grid-pro, notice that it already exists and skip it (logic in _includeStyle function)

So the lumo styles for grid-pro are last actually included, and they will override foo styles.

[pekam]

Some workarounds:

• use a stronger CSS-selector, e.g. [part~="row"] [part~="cell"]
• use !important after the CSS-properties
• define separate modules for each tag name

[pekam]

Suggested fix:

static _includeStyle(moduleName, template) {
  if (!template) {
    return;
  }
  let styleEl = template.content.querySelector(`style[include="${moduleName}"]`);
  if (!styleEl) {
    styleEl = document.createElement('style');
    styleEl.setAttribute('include', moduleName);
  }
  template.content.appendChild(styleEl);
}

So even when the style-module is already included, call appendChild to push the style-tag as last one.

[tomivirkki]

Works as expected with 24.3. Closing.