Create Your Own Input Field with JavaScript Web Components

how's it going guys my name is Dom and today I'll be showing how to build your own custom input element using web components in Native JavaScript all right so this here is what we're going to be building in this video now we can see that it looks quite nice so we're going to be using CSS to of course style it up all within the component itself but also you're able to add your own custom properties and attributes to this element as an example I've already selected this one in the JavaScript so I can say my input error equal to and I can change the error States programmatically like this I'll press enter and we get that new state okay you can clear this using a value of n just like this and you can also do the same thing for the value of the input field itself and inside the elements here we can see this is what it actually looks like when you're using it in your own code custom input type of text it's going to support all of this stuff so let's go inside this tab right here and begin from scratch to create what I just showed you so going inside vs code here I've got a couple of starting files but they're all empty okay so uh create this file structure here where you have an index HTML an index.js file this is your starting point in the JavaScript as well as a folder called components with a custom input. JS and a custom input. CSS so you can pause the video now and create this file structure and in order order to include your Javascript file in the HTML we're going to using a script type of module with a source pointing to index.js a type of module is needed here because we want to use the import export syntax okay now speaking of that let's go inside the custom input. JS file and begin by creating our class representing the web component we're going to say here export class custom input extends HTML element okay if you want to build components like this you must extend HTML element as well as calling the super method from with inside the Constructor so we'll do that right now alongside this we're going to be using a shadow Dom to create our own HTML markup for what goes inside our component of course being an input field and also a paragraph field for the error message so let's say this do attach Shadow and like I said this here is going to let us have our own custom HTML we'll say mode of open here very important and there we go so now we're going to hop down here and say this. shadowroot doin HTML is equal to then using the back ticks near the one on your keyboard to activate template strings and multi-line strings here we're going to first include our CSS file so we'll say here input Rel of stylesheet as per usual href okay going to uh components custom input. CSS okay so what's happening here is basically we're using a root relative link here so for SL components then custom input. CSS to of course include this CSS file for usage inside our uh input component okay let's make this a link not an input my mistake there we go let's say input with a type of text and a placeholder of something such as username just as an example here I'll save this and then go inside the index.js file actually so we first uh need to import and register our custom element so this one right here before we can start using it so let's say import here we're going to be importing from uh the/ components and custom input do JS file okay and this here is going to grab onto uh the custom input class which we just created and now we can just say uh custom elements. Define custom- input this is your tag name for the web component and we're going to be providing here the class itself so a reference to the class now we can start using this tag in the HTML at the moment our input only contains a simple input back inside here now we can say custom- input just like this and we should get a result on the screen I'll save this go back in the browser and we do indeed get that input filled so if we inspect the elements here we can see that this tag is our host so it's our container for the web component and within that we've got in the shadow rout we've got a link script so our CSS file and also the input field itself the reason why this is a container is because we also want the error message paragraph tag as well so our component is not just an input field it's also a paragraph tag in the case of error messages so this is your container the equivalent might be a div called input container or something along those lines if you weren't using a web component going back inside here we want to ideally say something such as custom input with a type of text or maybe even password or number or email you may want to switch up those types there but also a placeholder you might want to say placeholder equal to something such as enter your username dot dot dot whatever it might be right so we now need to grab onto these values and use it when we're building up the Shadow root which means up here we can make two constants one for the type equal to this. get attribute we're going to grab onto the type attribute if none was provided by the HTML code we can default to text let's do the same thing for placeholder just like this placeholder also is going to have a default this time an empty string there we go so now we can use our uh our string injection here so we can just say using uh a curly sorry a dollar sign and the curly braces we can put an expression inside here we're going to say type to inject that one and the same goes for the placeholder and it's going to look something such uh such as that so we can save this go back in the browser and we get enter your username and the type of text has been uh forwarded onto the input field let's prove this real quick by changing this to be a password as an example save this go back in here start typing and it's a password so we are forwarding on those attributes into the building of the HTML going inside the CSS we're going to actually Target the host first so what does host mean in the context of these web components well it refers to our main container this one right here now remember that if you were to to in your main HTML page if you were to start adding CSS to your web component for example you want to make the width to be 500 pixels or something such as that that would apply to your custom input host container and not the input field itself so this means within here we can set a default width of 250 as an example okay and a display of inline block and a font size of 4 pixels right this here is all the default styles that applies to your container remember you need to think about this as being a simple div around your input field okay with that being said this means the input field itself is going to need a width of 100% this input field must take up the full width of the container going back to the input now notice we don't need to have any class name here because we're all inside the context of the component so we can Target the input field directly once we're inside here we're going to add a few properties let's begin with that width 100% of the container save this back in the browser and if I refresh here we get a 250 pixel uh container and the input field is taken up all of the width there there is some padding so let's fix that a overall pad rating of uh 0.75m or 75% of the current 14 pixel font size save back in the browser and there we go it's looking really nice now after refreshing and there we go so that is where we're currently at we have the container styled and some of the input field update the font size to be 1 a dark gray color here uh no border and no outline we're going to be changing this to have a box Shadow instead so we'll say box Shadow for 005 pixel rgba 00 0 and 0.1 for a 10% opaque black and a border radius here of 5 pixels save this back in the browser and we get this here uh so we're going to say here uh input and we're going to say focus on Focus we'll copy this here and make it a 30% opaque black as opposed to 10% so three here as well as a transition on the input field to say box Shadow at 0.25 seconds save this back in the browser refresh click on this and we get that nice transition when focusing on the input field let's focus on error State all right how is this going to work well we need to have a paragraph inside our web component so we'll say here a new P tag with a class of error Das message and then we're going to need a Setter for the error we'll say set error let's grab onto that value what is this doing well this code here this function is going to run whenever we say our input. error equal to so this here is a custom set up I've got a video dedicated to these if you're interested but if not just follow along and it should make sense okay from from this set error whatever you pass in so for example in my original uh you know demonstration here this error this string is what the value is going to be let's first trim that off if it is a string okay so say here const error message equal to if the type of the value is a string we're going to say v. trim otherwise n once we have that error message what are we going to do we're going to be updating these elements the first thing is to update the input field to have an error State class we'll say this. shadow root. query selector remember Shadow root refers to our own incapsulated uh Dom within the component which means we can access things such as query selector just like the document right query selector input okay do class list toggle let's toggle the has error class based on if a error message was provided so we can say boing treat this error message as a bing okay it'll give us true or false in other words if a string was provided and it's truthy if it's got a value right then this will be equal to True which means we add that has error if we don't provide a string or if it's empty whatever it might be then it's going to be false we're going to say once again this Shadow root query selector this time selecting the class of error Das message being the P tag we'll say text content equal to the error message itself so I'm going to stop right here I'm going to test this code out let's go into the elements Tab and select the custom input if you didn't know you can say dollar sign Z to access the currently selected element in the console this would be the equivalent of saying document. query selector and selecting the field directly so we're going to say dollar sign 0. error is equal to custom error press enter and we get that right there our message appears in the paragraph tag and also if we inspect this we can see that we have that class of has error on the input field itself so with that being said let's go inside the CSS and add some more CSS for these new States what are we going to do input. has error when the input field has an error we're going to add a border two pixel solid red for the error message uh paragraph tag a color of red and a white space of no wrap in the case where the message is too long and it's going to extend past the container uh you can add that in if you like up to you save this go back in the browser refresh we're going to be selecting that again and uh add in the error and there we go there are a few more things to do uh one of them is going to be to add or insert a value to the input field okay so to achieve this we're going to first be uh be creating a getter for the value So when you say input field. getet sorry Dov value this here is going to run we're going to return simply just the input field value itself so this. Shadow root. query selector input. value okay so let's test this one out back in the browser refresh uh we're going to say decode here uh and and and then we're going to say dollar sign. value and we get decode right there so our geta is running and we're getting that value and we're just forwarding on the input field itself uh from there so what's next well we can say set value I want to set the value now and for this one it's going to be again quite straightforward this time we're going to be set setting that input value equal to the value which the user passes in through that okay let's change the type back to text so we can actually see what's going on here I'll save this go back in the browser we can now say doll sign 0. Val is equal to and make it something such as water prenter and it changes that value let's try and retrieve it now and the same thing works both ways fantastic now the very last thing to do is going to be two to accept both the value and the uh and the error message when it first gets rendered and this is similar to what you can do with a standard input field so we want to say custom input value equal to Decode by default and also an error equal to let's say wrong username so I save this go back in the browser refresh we don't get those attributes being used it's going to be quite straightforward guys go back inside here in the Constructor we're just going to say well this do value is equal to this do get attribute and grab onto the value attribute when they first get created right and the same thing goes for the error because value and error they're calling the Setters down here so all this stuff is going to be happening when you set those values save this back in the browser and we get that default state right off the bat so that is how to build your own Uh custom input element using web components if this video helped you out or you learn something make sure to drop a like And subscribe to the channel and I'll see you guys in the next video

Channel: dcode

Views: 2,464

Keywords: web components tutorial, custom input fields, dynamic forms tutorial, web components guide, web components best practices, web components basics, web component examples, learn javascript web components, how to create a web component, how to build custom element javascript, html custom elements, shadow dom tutorial, adding css to web component

Id: OqtexwJvI3I

Length: 16min 45sec (1005 seconds)

Published: Thu Mar 21 2024