events like sl-hide bubbling is confusing about shoelace HOT 1 CLOSED

// this is code in some custom element far down:
class ElementFarDown extends Element {
  template() {
    return html`
      <sl-select on:sl-hide=${() => this.dispatchEvent(new MySelectHiddenEvent())}>...</sl-select>
    `
  }
}

class MySelectHiddenEvent extends Event {
  constructor() {
    super('my-select-hidden', {bubbles: true})
  }
}

// code in a high-up element:
class HighUpElement extends Element {
  template() {
    return html`
      <div on:my-select-hidden=${() => console.log('some low-down select was hidden')}>
        <sl-dialog 
          on:sl-hide=${() => console.log('dialog hidden (not some other element unexpectedly hidden)')}
        >
          ...
        </sl-dialog>
      </div>
    `
  }

  connectedCallback() {
    super.connectedCallback()
  }
}