How to register & dispatch a event

[zhaoyiming0803]

🐛 Bug Report

💻 Repro or Code Sample

🤔 Expected Behavior

😯 Current Behavior

How can i register a custom event, and dispatch it in the my-tag

How to receive messages that trigger by $emit

<my-tag onChange="onChange"></my-tag>

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• Version [e.g. 1.8.0]

[usrrname]

I suggested we contribute that to the docs in #6638
If you find this helpful, please give it an upvote!
Here's an example @zhaoyiming0803 https://stackblitz.com/edit/vitejs-vite-p2v9tm?file=README.md

[zhaoyiming0803]

The following codes can work, actually, i want to register & trigger a custom event:

<footer-tag slot="footer" id="footer-tag"></footer-tag>

const footerTag = document.querySelector('#footer-tag')

footerTag.addEventListener('on-change-footer-greeting', (e) => {
  console.log('on change footer greeting: ', e.detail)
})

My footer-tag Component:

@customElement({
  name: 'footer-tag',
  template,
  styles
})
export class Footer extends FASTElement {
   greetingChanged () {
      const customEvent = new CustomEvent('on-change-footer-greeting', {
         detail: {
            greeting: this.greeting
         }
      })
      this.dispatchEvent(customEvent)
  }
}

[chrisdholt]

Take a look at this line:

fast/packages/web-components/fast-foundation/src/tree-item/tree-item.ts

Line 68 in 4e17af8

this.$emit("selected-change", this);

You can use the emit helper to emit a custom event with a name, and you can pass back additional information (the event object if available as an example).

FYI, I’m going to convert this to a discussion as it seems more question related than an actual issue.