如何处理事件并将其从定义组件传递到点亮组件

Question

我正在尝试使用 lit Element 设计 Web 组件，并且我需要有关事件的帮助。正如我们从附加的代码片段中看到的，我们可以@change="${this.handleEvent}"在 html 模板中使用并处理该函数handleEvent(e){}并处理lit Element 组件内的通过这种方式，事件仅在点亮的 Web 组件中受到限制和控制。

然而，当其他人使用我们的 Web 组件时，他们对定义组件中这些事件的值没有太多控制或访问权限。例如，如果我们有一个 index.html 文件并且我像这样使用它<my-element onchange="handleEvent(e)"></my-element>，我应该有权访问 onchange 事件并仅调用索引文件内的函数。

那么，有没有一种方法可以实现与常规 html 事件类似的行为，而不是编写仅限于 lit Element Web 组件的事件。

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<script type="module">
  import { LitElement, html, css } from 'https://unpkg.com/lit-element/lit-element.js?module';
  
  class MyElement extends LitElement {
  
   static get properties() {
      return {
        checked:  { type: Boolean, attribute: true }
      };
    }
    
    static get styles() {
      return [
        css`
          div {
            padding: 10px;
            width: 90px;
            border: 2px solid orange;
          }
        `
      ];
    }
    
    render() {
      return html`
      <div>
         <input
            @change="${this.handleEvent}"
            ?checked="${this.checked}"
            type="checkbox" /> Checkbox
       </div>
      `;
    }
    
    handleEvent(e) {
      console.log(`Checkbox marked as: ${e.target.checked}`);
    }
  }
  customElements.define('my-element', MyElement);
</script>

// Index.html
<my-element></my-element> 
// I am expecting to pass an event and handle it in the importing 
component. 
// Something like: **<my-element onchange="handleEvent(e)"}></my- 
element>**

Answer 1

如果你想监听元素外部的事件，你应该调度一个像这样的事件：

const event = new Event('my-event', {bubbles: true, composed: true});
myElement.dispatchEvent(event);

有关事件的 Lit 文档很好地概述了如何以及何时调度事件https://lit.dev/docs/components/events/#dispatching-events