[labs] Consider adding a SlotController to help with common slot patterns

[justinfagnani]

There are a few common patterns for using slots that could be nicely wrapped up in a reactive controller:

• Determining when a slot has assigned content so you can style the component differently (ex: add padding when there's content).
• Tracking slotted children to call APIs (set properties, add/remove event listeners, call methods) when child enter and exit the slot.

We could make a SlotController(s) to help. Example that covers the first case in this gist: https://gist.github.com/justinfagnani/a90eefb8da6bbfa4250a46732a8e5fbc

[WickyNilliams]

I've written something almost exactly like this in my component lib. I started with a single controller managing multiple slots, but in the end i settled on a 1:1 controller:slot relationship, because i preferred to write code like this:

class MyComponent {
  fooSlot = new SlotController("foo");

  render() {
    return html`
      <slot name=${this.fooSlot.name}></slot>
      <div ?hidden=${this.fooSlot.isEmpty}></div>
    `;
  }
}

it was nice to have the name defined in one place, the code felt more readable, and it avoided errors whenever i renamed/referenced slots

[justinfagnani]

A SlotController could also help with issues like: #2629

[justinfagnani]

Closing in favor of lit/rfcs#7