Create Your Own Input Field with JavaScript Web Components

[@kerrykreiter445]

Super cool and useful! Thanks Dom!

[@dcode-software]

Glad you liked it!

[@vincent-cg7bl]

I discovered your channel with very good videos. Have you ever made a video on how to organize your folders and files when you have several components? From a performance point of view, maybe it's not a good practice to load them if you have a lot of them? A bit like Angular where everything is compiled.

[@dcode-software]

Yeah, I've read some differing opinions when it comes to loading the components and CSS. I'm unsure of what the "correct" answer is, but for small-scale apps I don't see an issue - plus there's arguments to say that the browser will cache the resources (JS, CSS etc.) anyway so it may not be as big of a problem as originally thought.

[@venkatakalyansiripalli8258]

it would be really helpful if you show how to publish these web components as npm packages and use them inside seperate react or angular projects

[@mpsbrasilia]

Sou seu fã, sou do Brasil.

[@chaz6399]

Suppose I make a custom component like this but also give it a name property. If I use the component in a form will the .name and .value be picked up in a FormData object constructed from the form, as in the following code? const formData = new FormData(myform); //does formData have an entry for my custom component? If not, is there an elegant solution or do I have to iterate over the custom components and inject them into the FormData object myself?

[@hoshi411]

you made another video on how to make a button web component and in this one you have made an input. Now please make a third video where you use the button.js file and the input.js file together in the same project and when you click on my-button element it updates my-input element. There have been many tutorials out there about building a single component but no one has put them together yet.

[@mhsn27mhsn10]

hello , can use tailwindcss class with when create web components or just need to pure css ?

[@dcode-software]

Hey, I haven't tried Tailwind CSS with web components but I would imagine it would work as long as the Tailwind classes are available for the component to use.

[@smoothbeak]

Looks good to me. Is there/what are the advantages to going this route rather than using a framework like React?

[@dcode-software]

In small apps I don't see a problem with web components if that's what you want to do, but for medium/large scale I would stick with React. Of course, React offers a lot of functionality that web components aren't able to provide without a library/custom code. There's more to it than just component-based UI.

[@smoothbeak]

@@dcode-softwareCheers

[@小明-q8j]

nice video

[@mpsbrasilia]

Crie um sidebar, chamando os componentes em uma div contente. Obrigado.

[@jayvee-official]

I have a question.. how is the value sent through a custom input via legacy form submission?

[@TomasMisura]

i still didn't find a courage to implement web components into my application but perhaps it's time move on. this would significantly improve level of my coding...

[@dcode-software]

Give it a go. I think I was saying to you last time that you probably still want to use something like React for larger projects but web components is definitely capable 👍

[@TomasMisura]

@@dcode-software i do not understand why i am so hesitant with web components or stuff like React / Vue but I suppose this is beyond my comfort zone, and I consider my coding style or approach to be "sufficient" for my needs. I wanna change my mind and I will do that.

[@jonice4229]

i think Light dom is better than shadow dom just in case javascript is disabled

[@mpsbrasilia]

Show show show

[@Maxim9575]

This is not a custom input, you just took the main input and then passed attributes with the necessary styling through currying. The way you did it here, no shadow-dom is needed at all, you could have done everything the same way developers did for select before, the main element was hidden, and the states from it were either passed or retrieved. In short, this is clearly not the lesson that could be talked about as writing a custom input component. And yes, in this case you could have used the "is" attribute to inherit from existing elements in HTML.