Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Header style scoping breaks in Firefox when rendered inside vaadin-split-layout and HTML imports are nested #1227

Closed
jouni opened this issue Feb 18, 2018 · 5 comments
Closed

Header style scoping breaks in Firefox when rendered inside vaadin-split-layout and HTML imports are nested #1227

jouni opened this issue Feb 18, 2018 · 5 comments
Labels
bug Something isn't working needs research More information needed to estimate needs triage Has to be triaged by the team

Comments

@jouni
Copy link
Member

jouni commented Feb 18, 2018

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.
@web-padawan
Copy link
Member

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?

@jouni
Copy link
Member Author

jouni commented Mar 5, 2018 •
edited
Loading

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

@web-padawan
Copy link
Member

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 web-padawan added bug Something isn't working needs research More information needed to estimate labels Apr 18, 2018
@web-padawan
Copy link
Member

web-padawan commented Apr 18, 2018 •
edited
Loading

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 web-padawan added the needs triage Has to be triaged by the team label Apr 18, 2018
@pdesjardins90
Copy link

pdesjardins90 commented May 23, 2018 •
edited
Loading

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

@jouni jouni mentioned this issue May 24, 2018
Closed
7 tasks
@tomivirkki tomivirkki mentioned this issue May 24, 2018
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working needs research More information needed to estimate needs triage Has to be triaged by the team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jouni @pdesjardins90 @web-padawan