app-grid class is not applied to distributed nodes

[rslawik]

Description

app-grid class is not applied to distributed nodes

Expected outcome

Distributed nodes can be styled by app-grid.

Actual outcome

Distributed nodes are not styled.

Live Demo

https://jsbin.com/fuxekesune/edit?html,output

[blasten]

Just merged #396 which addresses this issue. Thanks!

[rslawik]

The merged solution uses a different approach. Clients are expected to add a container with class="app-grid":

<my-element>
  <div slot="header">add to header</div>
  <div slot="grid-content">
    <div class="app-grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>
</my-element>

I wanted to suggest:

<my-element>
  <div slot="header">add to header</div>
  <div slot="gird-content">
      <div>1</div>
      <div class="wide-tile">2</div>
      <div>3</div>
  </div>
</my-element>

Is the former approach preferable? If so, why?
How can clients of <my-element> specify which child of the grid should be expandible? (E.g. "wide-tile" class in the latter approach.)

Currently the demo I prepared works in ShadyDOM, but not in ShadowDOM.

[blasten]

There are a few limitations in the custom property shim so I don't think we can support what you originally suggested. The current API (of app-grid) tries to work around those limitations ;)

[rslawik]

Thank you for the explanation. I think it is worth documenting though.
For example a section to main README.md on how to use it (app-grid) for distributed children and which limitation we are trying to work around.

[rslawik]

A follow up question. Under Shadow DOM v1 it is no longer possible to target a descendant in the slotted subtree (only top-level elements). The accepted solution:

<x-foo>
  <ul class="app-grid">
    <li class="expand-me">item</li>
  </ul>
</x-foo>

will not work - there is no way of applying any styles to any of the descendants of <ul>.

[frankiefu]

Correct. In Shadow DOM v1, ::slotted can only take a compound selector. So the support has been dropped from app-grid in 2.0.