paper-item-shared-styles.html styles the custom element that includes it

[mgiuffrida]

paper-item-shared-styles.html uses :host to apply styles, which means any custom element with <style include="paper-item-shared-styles"> will have these styles applied to it. This breaks the use case of including paper-item-shared-styles in order to create light-weight <button class="paper-item"> elements.

One fix would be to change :host to :host(paper-item), :host(paper-icon-item) for selectors which include :host. (You'll also have to add (paper-icon-item) to the :host in paper-icon-item.html so it has sufficient specificity.)

But that currently won't work in the custom style shim due to Polymer/polymer/issues/3610.

[mgiuffrida]

@notwaldorf I don't know what's happened, but after a bower update my PR to change :host to :host(paper-item) FUBARs the demo page beyond description in shady DOM, with or without the other change we discussed (making the same change in paper-item.html).

I don't know if I'll have time to dig into a problem that only seems to happen in shady DOM. I'm CrOS gardener this week as well. But this is a high priority issue for us: to be able to replace paper-item with a native element. @tjsavage @freshp86 Can you guys triage this? I'm not even sure this is the right approach anymore.

[notwaldorf]

The only other approach is to have a copy pasted version of this stylesheet, like in https://github.com/PolymerElements/paper-item/pull/89. I'll take a look to see if there's something straight forward up with the PR.

/cc @cdata

[notwaldorf]

@mgiuffrida Ah, there's another Polymer issue left: :host(paper-item:focus):before doesn't work in the Shady DOM.

[freshp86]

@mgiuffrida: FYI I am going forward with using <button class="dropdown-item"></button> in Chrome's MD Settings, where dropdown-item is our own CSS class used instead of paper-item (see chromium CL). This seems sufficient for MD Settings. So it is up to you whether you want to move forward with this fix or not. It is not blocking MD Settings anymore.

[notwaldorf]

@freshp86 I was going to suggest that, while we're sorting this out. Thanks (and sorry for the inconvenience!)

[bennypowers]

Is there a workaround for this? if not, the reference to paper-item-shared-styles should be removed from docs.

[halloweenman]

Using code shown below in the Polymer Starter Kit my-app file will prevent the website from rendering correctly. Yet references in paper-item docs state "If you are concerned about performance and want to use paper-item in a paper-listbox with many items, you can just use a native button with the paper-item class applied (provided you have correctly included the shared styles)" - but doesn't work.

<link rel="import" href="../bower_components/paper-item/paper-item-shared-styles.html">

<style is="custom-style" include="paper-item-shared-styles"></style>

<paper-listbox>
  <button class="paper-item" role="option">Inbox</button>
  <button class="paper-item" role="option">Starred</button>
  <button class="paper-item" role="option">Sent mail</button>
</paper-listbox>