How would you approach forms using stencil.js?

Question

I'm looking to start using stencil.js for managing web components for a number of projects so that they're standard, consistent and maintainable. One question that came into my mind with this is how you would manage forms.

For example, typically, I would expect a component library to have form field components such as an input, select and textarea. However, reading Stencil's docs, it seems to suggest creating the complete forms as component - in my scenario, Angular would be the typical go to framework for this using Reactive Forms, does using stencil then mean I would create the complete form as a component and then reference this within my Angular component?

Is this a recommended approach and any more information around developers use of this would be great to here!

Answer 1

Yes, you can use Stencil to build the low-level components (input, checkbox etc.) and compose them in a Framework.

There are however some gotchas regarding form elements and shadow dom.

• input fields inside the shadow dom will not be picked up by a form ancestor outside the shadow dom
• I remember hearing about some accessibility concerns, but I'm not certain

There are some ways to enable form participation (such as manually creating a hidden input as a sibling of the shadowed component), but just a couple days ago Stencil published an update including support for formAssociated which might be a better option (although ATM the browser support is about 87%)

Since Stencil was created for use by the Ionic Framework team, I always suggest looking at their implementation for inspiration/best practice (e.g. input component). They appear to disable shadow dom for form elements.

Some more links:

• Form-associated custom elements
• open issue in Porsche Design System to use formAssociated