Building a REAL Web Component from Scratch! - Tutorial
Вставка
- Опубліковано 27 лип 2024
- Visit linode.com/designcourse for a $20 credit on your new linode account.
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, I'm going to show you how to make your very own web component. We're going to be building a customizable, configurable tooltip web component that others can use in their projects. Web components encapsulate HTML, CSS and functionality so that they can be used without any interference in any project, based on any platform (such as Vue/React/Angular). They're a very handy way to integrate awesome UI elements created by others, and they also allow you and your team to share components that work on any platform.
Let's get started!
0:00 - Introduction
0:57 - An awesome offer from Linode
1:54 - UI / UX of the Tooltip
9:09 - Building the Web Component
35:17 - Outro
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi! - Навчання та стиль
Have you made a web component?!
may i ask what minitor you use?
Where are the timestamps?
@@ruhaanshWorld GOOD QUESTION! Doing that now
@@ruhaanshWorld Finished!
Been working on some using StencilJS, would love for you to possibly make a follow up video on web components using this.
Finally, this tutorial is out!! I have been looking over the internet for making web components for my website and now the lords have answered themselves. Thank you so much, Gary!
Thank you so much for this video! I had heard of the Shadow DOM and Web Components before, but never really looked into it. This changes everything for me!!
you have no idea how long i have been waiting for stuff like this
100% ^
Agreed!
Hey Gary
You are coming back to more serious tuts my friend. And that amazing.
Considering your awesome ability to simplify complex things, please continue to make more stuff like this.
I love your videos specially the designing part. As a front end developer it helps me a lot
As always first hitting the like button, then watching video.
Thank you man for your time and effort. Appreciate it!
Thanks for the great and simple tutorial! 👏
Would love to see more of these web component tuts!
This was really helpful! Shopify started using these heavily (although without the Shadow DOM feature) and they provided little documentation or resources and this was a great primer on understanding them and how to make them interactable / editable for clients 😊
I haven't yet gotten into javascript (but I'm pretty handy with HTML and CSS) and if this what JS WebComponents can do, I'm sold. I think I'm approaching the limit of what plain CSS can do in terms of animations and custom styling like this.
well explained. thank you very much!
The time you save once coded is priceless. I often wonder how many web components are the limit to not end up with your own version of "wordpress".
Garry, I would love a video on your favorite font families and the idea behind picking the correct weight, letter & line spacing and so on.
Wow . Thats a lot of learning in such a short duration. Thanks alot Gary.
Another tip besides the emmet for creating files in VS code: type "css/main.css" as file name and it will automatically create the folder as well.
Love your contents! Great contents, awesome presentation..
Who the hell disliked an awesome video like this one??
really need it, thank buddy 🙌🔥
I've made lots of web components using Lit and Svelte but shied away from the from scratch approach because people said it was hard. I'm glad to see it's not bad at all!
Something that might be useful if you want syntax highlighting for your html install lit-plugin extension for vscode (this is for lit-html)
However you can get the highlighting like this:
const html = String.raw;
html`Stuff`
String.raw just gives you a string little hack for nicer dx, using vanilla js
Loved your video...!! It makes so much sense after using laravel..!! Slots are awesome...!!
this is awesome gary! thank you
awesome tut, thanks!
Very helpful! Would be interested in seeing this go a couple steps further with css variables and built into a CMS like Drupal.
WOW , thankyou! Great stuff
I literally clapped at the end don't know why lol, I am sure going to try the web component now.
in the era of tools like Vue that you can import with one line of code, and use much more elastic components with much more ease, this way of building web components looks cumbersome ;-)
Amazing! Thank You.
I am a React developer and recently I am having to deal with a static website with a horrendously non-DRY HTML, CSS, jQuery (ugh) codebase, so I will definitely make use of the Web Components API to bring back some sanity. Thanks for the tutorial!
this was violently straightforward
Dang, wish I would have found your channel sooner! Subbed and liked!!
Awesome stuff!
same birthday with this great video !
Freaking awesome, thanks!
That's the stuff 🔥
It's cool that you show how web components work. In the real world tho you wouldn't really write components from scratch like this because there are so much boiler plate code and it gets messy very fast. If you're writing web components professionally, probably use something like Stencil.js for ex.
thanks, really cool !
ThAnk you
Edit : I would love the the normal JavaScript version of this
Awesome tutorial..👏 it will be good, if you could teach us about creating an npm package with multiple custom component.
Thanks Gary. I do wish, wish, wish you would include even only a 2-min section in all your demos to go thru any a11y focus, aria, and semantic markup considerations. Devs may then understand how to better meet their moral and soon legal duty to deploy inclusive components and products by habit... and (selfishly) fully improve my own learning and a11y practices :) I know it is not the focus of the tutorials and hope it may give you an(other) edge when recruiting students thru the paywall. Best Wishes
Awesome 👌👍
You could use css variables to change css properties of smth)
" we'll just make the font white ... and burn people's eyeballs essentially "
xD
you are a gift from GOD :D Thank you so much
Which program do you use for making icons (UI/UX)
Thanks for the tutorial! Liked, subscribed, and alerts are on. Can you nest a web component inside another? How do you get them to interact with each other outside the shadow DOM? Thanks!
What are benefits from using component instead of regular html/css/js - and what are disadvantages?
Something I've been wondering, as you mention at 8:55, how come people place the svg data directly into their webpage code, as opposed to just including the svg file using some sort of image tag? (I haven't worked with svg much so sorry if this is a silly question)
First of all, excelent video ! Thanks for that ! I've only got one question, when you reuse a component which contain a inline style, does the style we be repeated ? I think it's a lack of performance no ? For example in Vue I have an InputComponent which has his proper style, but when I make a Form of 10 inputs, the style is repeated 10 times ... it's not really good, that's why I think you should not put inner style on your component ... but may be i'm wrong ?
This blew my mind; throw everything away; start over. What's the limit? What deters us from making an entire page just an aggregation of components?
yeah i just asked that question here, using Web component for Views in SPA, reusable View component.
So amazing 😍👌❤️ .. Thank you so much ..
Please if you can teach us how to do same thing but using Vue.js
Thanks allot
Well ... the point of WebComponent is to do things natively so "same thing using Vue.js" doesn't really make sense. Anyway that's the kind of things that's very very easy to do with Vue.js so any basic Vue.js tutorial should do the job to get the same type of result.
Talk about the web component life cycle and the atribute change API.
Awesome
Once created, how to use it in different projects irrespective of any JS frameworks?
For example if I want to use it on my react project.
Hi, Gary!
It seems querySelector doesn't reach inside components. I have look forward about it and it seems it's a common error but I haven't found any satisfactory answer
As a programmer, I hissed when you wrote `if(expandState == true)`. Anyways, it doesn't take away from the usefulness of the video. It deserves the thumbs up!
What would you suggest? (I'm not a programmer but always looking to up my scripting abilities)
@@JeremyWhiteford1 first, there is never a need to use `==` for checking a boolean, you just have to use the boolean as an expression as in this case `expandState` always is a boolean. Secondly, we use `===` in 90% of the cases (altough this doesn't really matter, as it should be simplyfied for the boolean check)
@@JeremyWhiteford1 you do if(expandState) { } no need to use ` == true `
@@lasoloz6972 ah, that makes sense. Thanks for your answer!
@@JeremyWhiteford1 Glad I could help
is there a way to use the tooltip within a table with overflow:hidden? the tooltip content is been cut for longer texts. It would be good if the actual tooltip is been added to the body instead.
Awesome video. I recently started playing with the web components and I have a few questions.
Is there a way to import the style from a style sheet instead of writing it in the same .js file ? This would help me so much as the component gets much more complicated
How would I make the component change some properties like color and stuff if the theme of the whole page changes
I have been struggling to find these from a few days , any help would be aweosme !
yes you can import a css file on the components template
Maybe a tutorial of React Direflow or Angular Element about Web Component?
Any idea on how to get SCSS into web components
How do you pass data from a web component back to the main html which is calling it.
Also how do you communicate between two web components?
Great video! I got one question on 15:25. I couldn't connect the dots how is linked to the component defined in popupNotify.js. I couldn't find where the actual reference of popup-notify in the popupNotify.js.
through customElements.define
Does anyone know what the software was that he used to prototype with?
Always wanted to get into this. My current job is before ES6 and we are so god damn restricted as to what we're allowed to use
F
@@CodingUnited Rest in poultry indeed
@@dohnjoe342 I'm getting a new job soon so I dont gotta deal with this BS among other things lol. That's good if you like it I guess.
Why not use Babel?
@@abdelrahmankhalil "we are so god damn restricted as to what we're allowed to use" Any new tech needs approval from various sources making it damn near impossible lol
How about web Components for creatiing of Views for SPA ?
Next Gsap + Smooth Scrollbar :)
"Pop pop!" - Magnitude
You could use Lit Element for this. Extending HTMLElement is pretty low level API and requires quite a bit boilerplate.
that is exactly what a non-coder would say!
@@cirusMEDIA Sure. Some should use Assembly to get the job done.
@@Oswee lol.
Vanilla JS is finally back! 🤞
That's cool and all but... how do you package it up to distribute for others to reuse? 0_o
Great tutorial. Web components seem cool. One thing I want to mention that you could just rewrite your if-else statement without if-else. For example:
tooltip.style.transform = expandState ? 'scale(1)' : 'scale(0)';
alert.style.display = expandState ? 'block' : 'none';
cancel.style.display = expandState ? 'none' : 'block';
expandState = !expandState;
I can't figure out how to get two separate components to work at the same time
you need to add type="module" to the script tag
Very odd. Where did you get the code for the "alert" and "search"????
What's your opinion on this? Will web components end Frontend JS frameworks, since components is the only reason why I love React, I mean...
Sorry might be a bit late for this reply - this article led me to this video eventually and I think it answers the question quite well.
thenewstack.io/case-against-web-frameworks/
I'm confused. why do we set expandState to false inside the function? 29:11
It toggles the state so that it won't replay from scale(0).
❤🚀
Друг, ты крутой!
What are you looking at
Lot of steps. Try getting lit-html, pretty cool lib
create your own class instead
source code please
Wait, are you saying people use wix sites in their portfolio?
I about died from laughter
Wow, do you have 4 reptilian homes behind you!?
Edit: lol look at how much your backdrop has changed from 1:10 to 0:01
3 are in use. 1 bearded dragon, 1 female ball python, and 1 female burmese python.
@@DesignCourse Awesome!!!! As a reptile keeper myself I always wondered what was in those cages behind you. Very cool. :D
Is there a web componet that is not REAL?
Yeah, he could create a UI design and not develop it. Then it’s just a concept, not a real component!
I know, I know, ... The point of this demo is WebComponent, and NOT Tooltip. However ... "the" big challenge with tooltip component is to align it left/right/top/bottom of the point from which it pops out. (depending on the container, to avoid to be hidden). That challenge is completely overlooked here...
this is a web based web component framework from this guy Reiva, github.com/SirReiva/quantum , I've seen a demo and it looks like an ionic app
first
You have pretty eyes 😃 .
173rd Liker
Wow! Such an important number! Do you really think anyone cares? But i wont kudge you because i have done similiar stuff
No, wait, hold up, something aint right
You're "teaching" noobs how to noob harder
This is worse than covid
This is ReactJS for poor)))
You seem stressed out man.
I am. We're in the process of buying a house and getting our current house ready to sell. A LOT OF WORK!
@@DesignCourse Felt that. Keep cool, you got it.