tengo lo siguiente
<custom-component> <div slot="form"> <form> bunch of input elements <span slot="inner"> <button type="submit" id="submitButton"></button> </span> <button type="Reset"></button> </form> </div> </custom-component>¿Cómo escucho en el evento de clic el tipo de botón enviar desde el componente personalizado del componente principal? Por razones en las que no voy a entrar, hacer que toda la forma ranurada sea un componente no es una opción.
En el archivo del componente personalizado, esto es lo que probé
<slot name='form' > <slot name='inner' @click=${this.handleSearch}> </slot> </slot>Parece que necesitará cambiar algunas cosas para que esto funcione según lo previsto.
Primero, la ranura "interna" en su ejemplo no está haciendo nada. No puede tener una ranura anidada dentro de los niños de ranura renderizados DOM ligeros. Para probar esto y ver que esto es cierto, puede probar dos cosas.
<slot name="inner"> y verá que el botón "Enviar" aún se muestra bien en HTML.@click en <slot name="inner"> nunca se activa. Intente moverlo a <slot name="form"> y verá que la devolución de llamada se activa como se esperaba. Otro problema con el que se encontrará es que el Evento del navegador predeterminado que se muestra a través de shadowRoot no contiene ninguna información. Si console.log los datos en la devolución de llamada del evento, verá que todo lo que obtiene es {isTrusted: true} en lugar de la información más útil sobre eventos y elementos.
Dado que no puede crear el formulario dentro del componente web, la otra opción es manejar toda la lógica con JavaScript en una etiqueta <script> junto a su <custom-component> en HTML. Esto tiene sentido ya que está más cerca del uso previsto de los niños ranurados: poder agregar HTML arbitrario como niños a sus componentes web, pero su componente web no está necesariamente a cargo de nada relacionado con ese HTML, solo lo está representando. .
Si necesita estar a cargo de la representación, los eventos o la lógica relacionada con los elementos secundarios HTML, deben estar dentro del componente web o, de lo contrario, la lógica debe manejarse fuera del componente web.