core-drawer-panel [drawer] styles not applied

[tyler-dot-earth]

Hi alchapone! We exchanged some tweets, figured it'd probably be best to file an issue.

I'm having trouble with core-drawer-panel. Here are some observations that might help debug the problem:

Using this as an example: https://www.polymer-project.org/components/core-drawer-panel/demo.html Screenshot of the example (not of polymer-core-rails):

And implementing the exact code they have (including the blue/brown colors), here is my implementation using polymer-core-rails:

Take notice of the "Styles" tab in the Chrome Dev Tools! You'll notice that this particular CSS is never applied when using polymer-core-rails:

::content[select="[drawer]"] > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

I thought that maybe this was a problem with the core-drawer-panel CSS file not working at all except that div[main] (from the same file) is styled fine. I then compared those style declarations and found some subtle differences:

This is how the [main] styling was applied:

polyfill-next-selector { content: '#main > [main]'; }
::content[select="[main]"] > * {
  height: 100%;
}

And this is how the [drawer] styling was applied:

polyfill-next-selector { content: ':host [drawer]'; }
::content[select="[drawer]"] > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

So I tried changing it to this (to no success):

`polyfill-next-selector { content: '#drawer > [drawer]'; }`

I also attempted adding the shadow-shim attribute in the HTML file (as I'd seen it in other components) (also to no success): <link rel="stylesheet" href="core-drawer-panel.css" shim-shadowdom>

I'll update if I find any more information...

[Frexuz]

I have exactly the same problem, and using the same example. The core-scaffold also has the same issue. Rails 3.2.13 here.

[tyler-dot-earth]

@Frexuz I couldn't figure this out, so I switched to using Emcee/Bower. Here's an example project with a bit of documentation if you're interested: https://github.com/tsnieman/polyrails

[Frexuz]

@tsnieman thanks, I'll try it out :)

Edit: Works now :) However just FYI, I'm having problems with other components. core-icon was missing some styles that I had to add manually, and paper-shadow wouldn't render the shadow on IOS.

[leolukin]

@Frexuz "core-icon was missing some styles" - which styles?

[Frexuz]

//Missing core styles for some browsers
//http://stackoverflow.com/questions/27066400/polymer-icons-within-elements-not-rendering-in-firefox-or-safari-rails-app-with

core-icon-button {
  -moz-user-select: none;
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  margin: 2px;
  padding: 7px;
  vertical-align: middle;
}

html core-icon {
  background-repeat: no-repeat;
  display: inline-block;
  fill: currentcolor;
  height: 24px;
  position: relative;
  vertical-align: middle;
  width: 24px;
}

[npezza93]

So I tried emcee and whenever I require core-drawer-panel I just get a white screen. No errors in the console or from the server. Has anybody had this issue?

[Frexuz]

Someone told me the noscript attribute wasn't required. But removing it got me blank screens. Could this be the same issue for you?