this.forms returns undefined
Closed this issue · 5 comments
get forms() {
return this.querySelectorAll("form");
}
Will return undefined when the Web Component is defined before DOM is parsed.
e.g. when the WC is defined in a <script> tag in the HEAD
I just tried this out and it seems to work fine by adding the script to the <head>, did you make sure to use type="module"?
No; module will load script async, thus it will execute after DOM is parsed.
Don't load the script with src but execute the script in the head and there won't be any innerHTML yet when the connectedCallback fires, because it executes on the opening tag.
Almost all published Web Components don't work correctly.
Also see my blog post: https://dev.to/dannyengelman/web-component-developers-do-not-connect-with-the-connectedcallback-yet-4jo7
Can you explain your use case of loading the script before the DOM is loaded? The component relies on the <form> element and its contents being there in order to actually achieve what it's suppose to do. It's intended to enrich the pre-existing HTML
Waiting for DOM is oldskool. It means Custom Elements are HTMLUnknownElements before they are upgraded, with FOUCs being a major siteeffect. With modules or defer script upgrades always happen (too) late.
Defining Custom Elements before use is something oldskool libraries and frameworks can't do, and makes for a smoother UX
What's your use case though? I kind of want the Custom Element to be HTMLUnknownElements because if something fails in the JS then the form can still operate as before (and the user can handle submissions on the server if they wish). FOUC isn't even a factor in this Web Component since it's a form whether the component loads or not, and there's no styles in the lib itself. I prefer the HTML to be loaded before my JavaScript, the content is more important than the behaviour.
Going to close this as I don't think there's actually an issue here.