#issue-360: resolve grid gap issue wtth band body

[starryeyez024]

When trying to unravel issue #360, I noticed that in the band component, the compiled css contained this style:

::slotted(*) {
    margin-bottom: 0;
}
::slotted(*) {
  margin-bottom: var(--pfe-band--gutter--vertical);
}

which (I think?) is coming from this sass:

  @include pfe-slot($slot-name, "> *") {
    margin: 0;
  }

which lead me to wonder, is there much to gain from abstracting selectors? I was searching and searching for slotted but couldn't find it because it was @include pfe-slot() instead. So I thought maybe this is one of the levels of abstraction we can simplify? I understand the looping was to reduce replicating code, but it was also generating css selectors that don't work:
::slotted([slot="pfe-band--header"] > *:not(:last-child)) . Side note for the future, this selector (line 59) does work: [name="title"]::slotted(*:not(:last-of-type))

So, the explanation is almost longer than the code, but I wanted to explain the why for this approach, and why I removed the slot mixin. :)

[castastrophe]

I was already planning to deprecate the slot mixin. The goal behind was not to simplify the code but rather, slots are really confusing about how to structure the selector so the goal was to abstract that so that if we find a better way to structure our slotted references, we could update that in the mixin and have it propagate everywhere. That said, I just couldn't make the mixin work well.

[castastrophe]

So +1 slot mixin deprecation but I'd push back on removing all the loops from our sass like this. It's not that much abstraction to say, for the following regions - header, footer, body, aside - do this same thing.

[starryeyez024]

@castastrophe when I was trying to add the fallback margins and test in IE11, I noticed two things:

1. moving the layout styles to shadowDOM classes means IE11 cant see any of those styles (there is no shadow dom? at least the inspector doesn't think so)
2. I can view the pfe-band demo page in IE11, in this branch, but not in master (can you reproduce this?) I wonder if the slot styles are what's breaking the band in master?

#1 has major implications in terms of how we style things and how they work (or don't in IE11) if that is true. cc @markcaron @kylebuch8

[starryeyez024]

@castastrophe when I was trying to add the fallback margins and test in IE11, I noticed two things:

1. moving the layout styles to shadowDOM classes means IE11 cant see any of those styles (there is no shadow dom? at least the inspector doesn't think so)
2. I can view the pfe-band demo page in IE11, in this branch, but not in master (can you reproduce this?) I wonder if the slot styles are what's breaking the band in master?

#1 has major implications in terms of how we style things and how they work (or don't in IE11) if that is true. cc @markcaron @kylebuch8

this is what the band looks like in IE11, when i can get it to load (after i added the band, the page throws errors about a script taking too long to load)
https://www.evernote.com/l/AA62Bbjjq3JGFL5r1h2zp9DmmPqfknGC58k

[castastrophe]

Added a couple of documentation notes, otherwise great +1!

[castastrophe]

👍