element-styles/paper-material.html needs a unique dom-module id

[mbinette]

In 2.0-preview the standard <paper-material> will not be visible if you include a <paper-button> or <paper-card> in your component.

The reason is that element-styles/paper-material.html has a component in it with the definition <dom-module id="paper-material"> which is the exact definition that is in paper-material/paper-material.html.

The change to element-styles was added in the 1.2 tag and is used in the 2.0-preview branch and 2.0-preview branch versions of paper-card and paper-button (and maybe others?)

To repeat the issue, create a new polymer-2-starter-kit application. Modify bower.json to include paper-material and paper-button. Open my-view.html and add a <paper-material> with some text in it. Run the app and you will properly see the paper-material on my-view1.

Edit my-view1.html and import paper-button. Add a paper-button under the paper-material. Run the app and you will see the button but no longer see the paper-material or its content.

The exact same issue exists for element-styles/paper-item.html

[notwaldorf]

Neither of those elements uses paper-material anymore, and in 2.0 paper-material is deprecated in favour of the styles, so I think this shoooould be ok. I agree that if you use both it won't work, but we recommend not using a paper-material element at all (since it's an anti-pattern).

Does this sound ok?

[mbinette]

OK, I removed the <paper-material> elements and replaced with paper-material style. Works. I didn't know the paper-material component was being deprecated in 2.0.

[notwaldorf]

Actually, I'm going to re-open this because it needs to be fixed. The element-styles/paper-material.html needs to be renamed to something like paper-material-styles, so that the ids don't conflict

[pimenteljchristopher]

You changed the naming for core components of paper-button ..

[dman777]

@notwaldorf If I may ask, please, what is it about paper-material that is a anti-pattern? For learning and best practices.

[notwaldorf]

Since you also asked me on twitter, here's that answer here: the anti-pattern was <paper-material> the element, not the shared style, bc it just added a box-shadow. given that a shadow root and creating an element are not free, it was faaaaar too expensive for what it did (literally just add a box-shadow)

[dman777]

@notwaldorf Just to confirm, would this be also considered a anti pattern? It seems this is just webcomponent that is styled with no JS. Where the same thing can be done without a webcomponent using iron-overlay-backdrop?

https://github.com/PolymerElements/iron-overlay-behavior/blob/master/demo/simple-overlay.js