Create Your Own Input Field with JavaScript Web Components
HTML-код
- Опубликовано: 4 окт 2024
- In today's video I'll show you how to build your own custom input field using web components. It'll support features such as adding an error message programmatically, and forwarding on some attributes.
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript
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
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.
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.
Super cool and useful! Thanks Dom!
Glad you liked it!
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.
Looks good to me.
Is there/what are the advantages to going this route rather than using a framework like React?
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.
@@dcode-softwareCheers
Sou seu fã, sou do Brasil.
nice video
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?
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...
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 👍
@@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.
Crie um sidebar, chamando os componentes em uma div contente. Obrigado.
hello , can use tailwindcss class with when create web components or just need to pure css ?
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.
i think Light dom is better than shadow dom just in case javascript is disabled
Show show show