Vaadin-grid: Header style scoping breaks in Firefox when rendered inside vaadin-split-layout and HTML imports are nested

Created on 18 Feb 2018 · 5Comments · Source: vaadin/vaadin-grid

Importing vaadin-grid.html and vaadin-split-layout.html with a combined imports.html file causes grid style scoping to break in Firefox when placed inside vaadin-split-layout.

Works:

<!doctype HTML>
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import" href="../../vaadin-split-layout/vaadin-split-layout.html">
<link rel="import" href="../../vaadin-grid/vaadin-grid.html">

<vaadin-split-layout>
  <vaadin-grid>
    <vaadin-grid-column>
      <template class="header">Header</template>
      <template>Body</template>
    </vaadin-grid-column>
  </vaadin-grid>
</vaadin-split-layout>

screen shot 2018-02-19 at 0 18 40

Doesn’t work:

<!doctype HTML>
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>

<!-- A file with the previous imports -->
<link rel="import" href="imports.html">

<vaadin-split-layout>
  <vaadin-grid>
    <vaadin-grid-column>
      <template class="header">Header</template>
      <template>Body</template>
    </vaadin-grid-column>
  </vaadin-grid>
</vaadin-split-layout>

screen shot 2018-02-19 at 0 20 30

Looking with the inspector, at least the th element is missing class="style-scope vaadin-grid".

I’m suspecting this is happens with other wrapping elements as well, not just vaadin-split-layout.

bug needs research needs triage

Source

jouni

Most helpful comment

Now I can confirm the issue with the sink.html, the first <tr> element and all of the <th> elements inside it do not have the style-scope classes.

web-padawan on 5 Mar 2018

👍2

All 5 comments

I was unable to reproduce the issue with Firefox 58.0.2 and given code snippet above, could you point out what versions do you have installed and check for any errors in the console?

web-padawan on 19 Feb 2018

No errors in the console. Using 5.0.0-beta3. Firefox 58.0.2 as well.

You can also reproduce it using https://github.com/vaadin/vaadin-lumo-styles/blob/master/test/sink.html

jouni on 5 Mar 2018

Now I can confirm the issue with the sink.html, the first <tr> element and all of the <th> elements inside it do not have the style-scope classes.

web-padawan on 5 Mar 2018

👍2

UPD: still can be reproduced, and looks like it can be workarounded by setting the slot="primary" on the vaadin-grid explicitly. So it seems to be a polyfill issue. I'll try to provide the reduced test case.

Same happens to the <tfoot> children: both <tr> and <td> don't have style scope.

web-padawan on 18 Apr 2018

This happens to me as well, just using vaadin-grid and generated columns with dom-repeat. The class="style-scope vaadin-grid" is not applied to the header row. The workaround I did was this:

      _columnsChanged (columns) {
        Array
          .from(this.$.table.shadowRoot.querySelectorAll('#header>tr'))
          .forEach(row => row.classList.add('style-scope', 'vaadin-grid'))
      }

The columns property is what I pass to my dom-repeat to generate column templates