search

handsontable / hot-table

Handsontable - Best Data Grid Web Component with Spreadsheet Look and Feel.
http://handsontable.github.io/hot-table/
MIT License
130 stars 36 forks source link

No styling with Polymer's Shadow DOM enabled #23

Closed warpech closed 7 years ago

warpech commented 8 years ago

hot-table styles don't appear at all if Polymer 1.1 is loaded in Shadow DOM enabled mode.

  <script src="/sys/webcomponentsjs/webcomponents.js"></script>
  <script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = "shadow";
  </script>
  <link rel="import" href="/sys/polymer/polymer.html" />

Screenshot:

image

Polymer has some info about it: https://www.polymer-project.org/1.0/docs/devguide/settings.html https://www.polymer-project.org/1.0/docs/devguide/styling.html

peller commented 8 years ago

To apply a stylesheet to the shadow DOM, it must be brought in with rel="import" within the template. Unfortunately, polymer's transformations do not appear to work for non-shadow DOM, so in order to work with both modes I've found it necessary to bring in the stylesheet twice, once using the normal rel="stylesheet" for "shady" DOM and again with the rel="import" for shadow.

warpech commented 8 years ago

The suggested way is to use Polymer's Shared Styles: https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modules

I have pushed a fix to fix-styles-issue-23 branch. You can see both ways working:

Note: that styles need to be added to your regular <head> as <style is="custom-style" include="hot-table-style"></style>, because Handsontable's dynamic DOM tree is not shimmed correctly in Shady DOM.

Note 2: the file src/hot-table-style.html is a copy-paste of handsontable.full.css. It should be created by a script (Gulpfile, etc)

@budnix could you please review and merge if you agree?

warpech commented 7 years ago

Bump. This is important for us. I have opened a PR for this: https://github.com/handsontable/hot-table/pull/30

@budnix could you please review and merge if you agree?

budnix commented 7 years ago

@warpech I've reviewed, merged into develop and released as v0.5.0. Thanks!

warpech commented 7 years ago

Nice, thank you!

In future please make sure that src/hot-table-style.html is updated whenever handsontable.full.css changes.