--app-grid-expandible-item-columns value is always equal to --app-grid-columns if not in :host

[iSuslov]

Description

--app-grid-expandible-item-columns value is always equal to --app-grid-columns if styles not applied in :host, so in one element you can have only one app-grid if you want to use --app-grid-expandible-item-columns

Expected outcome

Ability to apply styles more specifically, for example in grid class.

Actual outcome

see descr

Steps to reproduce

Try to create two different app-grids in one element with different --app-grid-expandible-item-columns.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[frankiefu]

The current app-grid doesn't support having different --app-grid-expandible-item-columns in the same scope. This is also a limitation in Custom properties shim: within a given element's local DOM scope, a custom property can only have a single value. One workaround is to copy the CSS from app-grid and modify for use in your app.