Estoy usando Lit2.0, componentes Material Web, Django (backend).
una referencia: https://www.thinktecture.com/en/web-components/flaws/
No entiendo cómo enviar datos de formulario desde el componente Lit al backend (Django)
form.html contiene el componente Lit (basic-form)
<form id="id_demo" method="post" action=""> {% csrf_token %} <basic-form></basic-form> <button type="submit" class="mdc-button mdc-button--raised">Submit</button> </form>basic-form es un componente Lit y contiene componentes web Material
import {LitElement, html} from "lit"; // const template = document.createElement('template'); // template.innerHTML = ` // <slot></slot> // `; export class BasicForm extends LitElement { static properties = { form: '', }; constructor() { super(); // this.shadow = this.attachShadow({ mode: 'open' }); // this.shadow.appendChild(template.content.cloneNode(true)); } render() { return html` <mwc-textfield name="first_name"></mwc-textfield> `; } } customElements.define('basic-form', BasicForm);¿Podría alguien guiarme en la dirección correcta?
Puede tomar el value del elemento de campo de texto en desenfoque y guardarlo como propiedad de basic-form . Luego, al enviar el formulario, puede tomar la propiedad basic-form.value :
forma básica
export class BasicForm extends LitElement { static properties = { value: '' } onBlur() { this.value = e.target.value; } render() { return html` <mwc-textfield name="first_name" @onBlur="${this.onBlur}></mwc-textfield> `; }formulario.html
<form id="id_demo" method="post" action=""> {% csrf_token %} <basic-form></basic-form> <button type="submit" class="mdc-button mdc-button--raised">Submit</button> </form> <script> const form = document.getElementById("id_demo"); const basicForm = form.querySelector('basic-form'); const onSubmit = (event) => { console.log(basicForm.value); } form.addEventListener('submit', onSubmit); </script>En realidad esto no es tan fácil en absoluto. Tienes que usar ElementInternals: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals
"La interfaz ElementInternals de Document_Object_Model brinda a los desarrolladores web una forma de permitir que los elementos personalizados participen plenamente en los formularios HTML".
Dicho esto, aquí hay un ejemplo:
<script type="module"> import { LitElement, html, css } from "https://unpkg.com/lit-element/lit-element.js?module"; class MyItem extends LitElement { static get formAssociated() { return true; } static get properties() { return { name: { type: String, reflect: true }, required: { type: Boolean, reflect: true }, value: { type: String } }; } constructor() { super(); this.internals = this.attachInternals(); this.name = name; this.required = false; this.value = ''; this._required = false; } render() { return html` <label for="input"><slot></slot></label> <input type="${this.type}" name="${this.name}" id="input" .value="${this.value}" ?required="${this.required}" @input="${this._onInput}"> `; } _onInput(event) { this.value = event.target.value this.internals.setFormValue(this.value); } firstUpdated(...args) { super.firstUpdated(...args); /** This ensures our element always participates in the form */ this.internals.setFormValue(this.value); } } customElements.define("my-item", MyItem); const formElem = document.querySelector('#formElem'); formElem.addEventListener('submit', event => { event.preventDefault(); const form = event.target; /** Get all of the form data */ const formData = new FormData(form); formData.forEach((value, key) => console.log(`${key}: ${value}`)); }); </script> <form id="formElem"> <my-item name="firstName">First name</my-item> <button type="submit">Submit</button> </form>