Polyfill support for assignedNodes()

[hartjus]

Stencil version:

 @stencil/core@0.16.0

I'm submitting a:

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

The web components API call for supporting the HTMLSlotElement.assignedNodes() function. This is currently supported in WebKit browsers, but not in FireFox or IE/Edge. Is this on the near-term roadmap for Stencil to support?
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedNodes

We are writing some components that need to use this, but we are limited because it does not work on FireFox 60.

Expected behavior:

Code blocks currently utilizing .assignedNodes() and components that utilize the call do not work on FireFox/MS.

Steps to reproduce:

const slot = this.element.shadowRoot.querySelector('slot');
slot.assignedNodes().forEach(node => ...);

Related code:

// insert any relevant code here

Other information:

[adamdbradley]

Thank you for opening the issue. However, at this time we've decided to not implement this feature. If more requests are made we'll reevaluate then. Thanks.

[kensodemann]

Working with a community member who has noted the following examples of where they would like to know if there are alternatives to using the API:

First:
The following snippet behaves differently on Edge because el.children includes elements from render.

render() {
  const slottedControl = el.querySelector(`[slot=${SLOTS.control}]`);
  const hasContent = el.children.length > (slottedControl ? 1 : 0);

  return (
    <Host tabIndex={disabled ? -1 : null}>
      <div class={CSS.content} hidden={!hasContent || !open}>
        <CalciteScrim loading={loading} disabled={disabled}>
          <slot />
        </CalciteScrim>
      </div>
    </Host>
  );
}

Second:
How to check if a direct slot has nodes assigned (specifically with same-named nodes across components)?

For example, is there an Edge-compatible way of doing the following?

this.el.shadowRoot.querySelector<HTMLSlotElement>("slot[name=header]").assignedElements()

[kensodemann]

Further information on the above.

They want to be able to discern when the default slot has children as opposed to elsewhere within CalciteScrim. If this can be done via a query selector then they will need an example.

In the second case, they may have multiple components that can be nested where each component may have slots with the same name (icon, menuActions, etc), and they need to have a way of determining if a particular named slot in a particular component in that tree has elements assigned to it or whether it is empty.

[kensodemann]

Another clarification:

Our biggest problem is determining if the default slot has been populated. We can't query for [slot="foo"] because there would be no slot attribute applied.