Option to let createEventDispatcher pass through shadow DOM

[threeid]

Is your feature request related to a problem? Please describe.
createEventDispatcher can't not pass through shadow DOM boundaries.

As describe here, Link to lit-element doc, by default, a bubbling custom event fired inside shadow DOM will stop bubbling when it reaches the shadow root.

To make a custom event pass through shadow DOM boundaries, you must set both the composed and bubbles flags to true:

Currently, you have to hack like this:

  function handleInput(event) {
    this.dispatchEvent(new CustomEvent('change', {
      detail: event.target.value,
      bubbles: true,
      composed: true
    }))
  }

Describe the solution you'd like
Simple solution is like below:

createEventDispatcher({
  bubbles: true,
  composed: true,
  // other custom event options
})

Describe alternatives you've considered
Add another function like createCustomDispatcher to handle this case.

Or <svelte:host tag='custom-element' ref={that} attributes={['value', 'label']} />
which also allows you to reflect props to attributes for current custom component.

Or <svelte:options ref={that} />

that allow you to access to this keyword, with it you can use something like:
that.dispatchEvent or that.shadowRoot.querySelector()

How important is this feature to you?
I think this is important feature. Since you have no way but using hacky solution with this keyword.

[threeid]

Another issue i run into is that this will be undefined, Uncaught TypeError: Cannot read property 'dispatchEvent' of undefined when using this.dispatchEvent like:

 
  function handleChange(val) {
    this.dispatchEvent(
      new CustomEvent("select", {
        detail: val,
        bubbles: true,
        composed: true
      })
    );
  }

  function handleItemClick(event) {
    // do something ...
    handleChange(value);
  }

  function handleKeyDown(event) {
    if (event.key === "Enter") {
      // do something ...
      handleChange(value);
    }
  }

The temporary solution is that using dispatchEvent inside handleItemClick and handleKeyDown.

[km-smith]

Nice solution could also default composed and bubbles to true when the tag option is used. I believe that is the expected behavior when dispatching an event from a web component using createEventDispatcher but I'm new to Svelte so could be incorrect here.

[dummdidumm]

Closing as duplicate of #3119