Remove unneeded div when host could make the same function

[jorgecasar]

Some components has a div that wrap all the Shadow DOM, and host could do this action.

For example accordion:

  static get styles() {
    return [
      css`
        .accordion {
          display: flex;
          flex-direction: column;
        }

        .accordion ::slotted([slot='invoker']) {
          margin: 0;
        }

        .accordion ::slotted([slot='invoker'][expanded]) {
          font-weight: bold;
        }

        .accordion ::slotted([slot='content']) {
          margin: 0;
          visibility: hidden;
          display: none;
        }

        .accordion ::slotted([slot='content'][expanded]) {
          visibility: visible;
          display: block;
        }
      `,
    ];
  render() {
    return html`
      <div class="accordion">
        <slot name="invoker"></slot>
        <slot name="content"></slot>
      </div>
    `;
  }

Could be replaced by this, and change

  static get styles() {
    return [
      css`
        :host {
          display: flex;
          flex-direction: column;
        }

        ::slotted([slot='invoker']) {
          margin: 0;
        }

        ::slotted([slot='invoker'][expanded]) {
          font-weight: bold;
        }

        ::slotted([slot='content']) {
          margin: 0;
          visibility: hidden;
          display: none;
        }

        ::slotted([slot='content'][expanded]) {
          visibility: visible;
          display: block;
        }
      `,
    ];
  }
  render() {
    return html`
      <slot name="invoker"></slot>
      <slot name="content"></slot>
    `;
  }

I guess there are an issue with IE11 and slotted selector, and maybe we have to prefix with some * the slotted selector like: * ::slotted()

[jorenbroekema]

Hmm good one, I think normally we wouldn't put a container div around, not sure if there was a specific reason to add it. I'll investigate it a bit and add some docs if it's needed, or move this discussion to issues as a "bug" if we can safely get rid of it 👍

[jorenbroekema]

Okay, I checked, seems fine to change it but it would be :host ::slotted .... to support the other browsers. Checked in IE11, Chrome and Safari, seems fine there.

I also verified in our extension layer it works fine like this :)

So yeah, a PR is welcome!