3 ms·

I would like to love web components but they are still quite sucky to use (stringy attributes, bleh), especially if it's not your team who produces them. And s

I would like to love web components but they are still quite sucky to use (stringy attributes, bleh), especially if it's not your team who produces them. And some super basic stuff like buttons in forms is still an unsolved problem: > Form-associated custom elements: being a submit button https://github.com/WICG/webcomponents/issues/814 https://github.com/WICG/webcomponents/issues/814 opened 4 years ago and representatives of major browsers still don't have an answer

mdhb 3y ago
That form issue is actually resolved with full cross browser support already https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals https://developer.mozilla.org/en-US/docs/Web/API/ElementInte... Also you don’t need to pass objects as HTML attributes, I think people pick that up coming from React but the browser lets you pass around objects between components just fine by using properties
- morbicer 3y ago
  Can you provide me with an example please? I've seen the ElementInternals api but still don't understand how it should help with the case of being able to submit the form by hitting enter in one of the inputs (which is standard html behavior). I wasn't able to find working example anywhere and all the discussions around the issue are still open which leads me to an assumption that this is in fact, still unsolved. https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy50cyIsImNvbnRlbnQiOiJpbXBvcnQge2h0bWwsIGNzcywgTGl0RWxlbWVudH0gZnJvbSAnbGl0JztcbmltcG9ydCB7Y3VzdG9tRWxlbWVudCwgcHJvcGVydHl9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuQGN1c3RvbUVsZW1lbnQoJ215LWJ1dHRvbicpXG5leHBvcnQgY2xhc3MgU2ltcGxlR3JlZXRpbmcgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgc3RhdGljIGZvcm1Bc3NvY2lhdGVkID0gdHJ1ZTtcblxuICBAcHJvcGVydHkoKVxuICBuYW1lID0gJ2Zvbyc7XG4gIFxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICAgIHRoaXMuYXR0YWNoSW50ZXJuYWxzKCk7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIGh0bWxgPGJ1dHRvbiB0eXBlPVwic3VibWl0XCI-JHt0aGlzLm5hbWV9ITwvYnV0dG9uPmA7XG4gIH1cbn1cbiJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aGVhZD5cbiAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9zaW1wbGUtZ3JlZXRpbmcuanNcIj48L3NjcmlwdD5cbiAgPHN0eWxlPmJ1dHRvbiB7Y29sb3I6cmVkfTwvc3R5bGU-XG48L2hlYWQ-XG48Ym9keT5cbiAgPGZvcm0gb25zdWJtaXQ9XCJhbGVydCgnd29ya3MhJylcIj5cbiAgICAgIDxpbnB1dCBuYW1lPVwiYmFyXCI-XG4gICAgICA8aW5wdXQgbmFtZT1cImJhelwiPlxuICAgICAgPG15LWJ1dHRvbiBuYW1lPVwic2hvdWxkIHN1Ym1pdCBvbiBlbnRlciBidXQgZG9lc24ndFwiPjwvbXktYnV0dG9uPlxuICA8L2Zvcm0-XG48L2JvZHk-XG4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMy4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4yLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeNC4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjMuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1n...

mdhb 3y ago

That form issue is actually resolved with full cross browser support already https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals https://developer.mozilla.org/en-US/docs/Web/API/ElementInte... Also you don’t need to pass objects as HTML attributes, I think people pick that up coming from React but the browser lets you pass around objects between components just fine by using properties

morbicer 3y ago
Can you provide me with an example please? I've seen the ElementInternals api but still don't understand how it should help with the case of being able to submit the form by hitting enter in one of the inputs (which is standard html behavior). I wasn't able to find working example anywhere and all the discussions around the issue are still open which leads me to an assumption that this is in fact, still unsolved. https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy50cyIsImNvbnRlbnQiOiJpbXBvcnQge2h0bWwsIGNzcywgTGl0RWxlbWVudH0gZnJvbSAnbGl0JztcbmltcG9ydCB7Y3VzdG9tRWxlbWVudCwgcHJvcGVydHl9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuQGN1c3RvbUVsZW1lbnQoJ215LWJ1dHRvbicpXG5leHBvcnQgY2xhc3MgU2ltcGxlR3JlZXRpbmcgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgc3RhdGljIGZvcm1Bc3NvY2lhdGVkID0gdHJ1ZTtcblxuICBAcHJvcGVydHkoKVxuICBuYW1lID0gJ2Zvbyc7XG4gIFxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICAgIHRoaXMuYXR0YWNoSW50ZXJuYWxzKCk7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIGh0bWxgPGJ1dHRvbiB0eXBlPVwic3VibWl0XCI-JHt0aGlzLm5hbWV9ITwvYnV0dG9uPmA7XG4gIH1cbn1cbiJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aGVhZD5cbiAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9zaW1wbGUtZ3JlZXRpbmcuanNcIj48L3NjcmlwdD5cbiAgPHN0eWxlPmJ1dHRvbiB7Y29sb3I6cmVkfTwvc3R5bGU-XG48L2hlYWQ-XG48Ym9keT5cbiAgPGZvcm0gb25zdWJtaXQ9XCJhbGVydCgnd29ya3MhJylcIj5cbiAgICAgIDxpbnB1dCBuYW1lPVwiYmFyXCI-XG4gICAgICA8aW5wdXQgbmFtZT1cImJhelwiPlxuICAgICAgPG15LWJ1dHRvbiBuYW1lPVwic2hvdWxkIHN1Ym1pdCBvbiBlbnRlciBidXQgZG9lc24ndFwiPjwvbXktYnV0dG9uPlxuICA8L2Zvcm0-XG48L2JvZHk-XG4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMy4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4yLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeNC4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjMuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1n...