paper-toast not working in Firefox and Safari

[Bor1s]

Hi @ahuth. I tried to use paper-toast element with this gem but it does not work properly in Firefox and Safari browsers (Chrome works perfectly). I opened native paper-toast demo page in all of three and it works there (https://www.polymer-project.org/components/paper-toast/demo.html). After debugging I found that issue was produced by polymer.js:10161 (TypeError: null is not an object (evaluating 'style.textContent')). Since neither Firefox nor Safari supports native web components they use polymer.js to make spikes and work properly. So, seems to be style parameter is null there, why - I don't know. I would be very thankful if you could take a look and shed light on this issue.

polymer.js

...
installScopeStyle: function(style, name, scope) {
      var scope = scope || this.findStyleScope(), name = name || '';
      if (scope && !this.scopeHasNamedStyle(scope, this.localName + name)) {
        var cssText = '';
        if (style instanceof Array) {
          for (var i=0, l=style.length, s; (i<l) && (s=style[i]); i++) {
            cssText += s.textContent + '\n\n';
          }
        } else {
          cssText = style.textContent;
        }
        this.installScopeCssText(cssText, scope, name);
      }
    },
...

[ahuth]

Thanks for raising this issue, @Bor1s. Lately I've been having a lot of issues with this and the latest version of Polymer. Not sure if this is related.

In any case, I'll take a look at this. Not sure when that will be, though, with the holiday and everything.

Thanks again.

[Bor1s]

@ahuth you are welcome. Also there is one point about issue with core-icons that I think will help you to fix it. Polymer elements use different types of stylesheets, e.g:

<link rel='stylesheet' type='text/css' href='whatever_path'>
<link rel='stylesheet' type='text/css' href='whatever_path' no-shim>
<link rel='stylesheet' type='text/css' href='whatever_path' shim-shadowdom>

So the reason why core-icon (as well as core-collapse and other) does not work properly in your gem is because you recursively take content of those stylesheets and insert it into <style> tag, rejecting all attributes like shim-shadowdom from original <link> tag (that must be present for all browsers except Chrome). My solution for fixing this issue was to insert links inside my rails layout directly and set live compile to true, e.g:

  <link href="/assets/core-icon/core-icon.css" rel="stylesheet" shim-shadowdom>

config.assets.compile = true

After this icons was back to normal.

P.S Happy holidays!

[ahuth]

Thanks for the holiday wishes, and I hope yours was good, too!

Also, thanks for looking some more into this. Unfortunately, I've recently made the decision to not work on this gem anymore. I just don't have the need or the motivation to put much time into it. Sorry!

I will still look at PRs, though.

[npezza93]

For the installScopeStyle error I found commenting cssText = style.textContent; got paper-toast and other elements that crashed due to this error like core-dropdown and paper-dialog to work. Kind of. It's definitely not an elegant fix but it'll get the job done for the most part.

EDIT: Although it seems to break core-overlay when a core-overlay is supposed to close.