Building a REAL Web Component from Scratch! - Tutorial
HTML-код
- Опубликовано: 3 июл 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.
you have no idea how long i have been waiting for stuff like this
100% ^
Agreed!
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!!
As always first hitting the like button, then watching video.
Thank you man for your time and effort. Appreciate it!
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
Thanks for the great and simple tutorial! 👏
Would love to see more of these web component tuts!
Wow . Thats a lot of learning in such a short duration. Thanks alot Gary.
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".
well explained. thank you very much!
this is awesome gary! thank you
really need it, thank buddy 🙌🔥
Love your contents! Great contents, awesome presentation..
Who the hell disliked an awesome video like this one??
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!
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 😊
awesome tut, thanks!
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.
Loved your video...!! It makes so much sense after using laravel..!! Slots are awesome...!!
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.
Awesome stuff!
WOW , thankyou! Great stuff
this was violently straightforward
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
I literally clapped at the end don't know why lol, I am sure going to try the web component now.
same birthday with this great video !
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.
Amazing! Thank You.
Freaking awesome, thanks!
thanks, really cool !
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 ;-)
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.
That's the stuff 🔥
Dang, wish I would have found your channel sooner! Subbed and liked!!
Awesome 👌👍
Very helpful! Would be interested in seeing this go a couple steps further with css variables and built into a CMS like Drupal.
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!
you are a gift from GOD :D Thank you so much
ThAnk you
Edit : I would love the the normal JavaScript version of this
" we'll just make the font white ... and burn people's eyeballs essentially "
xD
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 tutorial..👏 it will be good, if you could teach us about creating an npm package with multiple custom component.
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.
Awesome
You could use css variables to change css properties of smth)
Talk about the web component life cycle and the atribute change API.
Vanilla JS is finally back! 🤞
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.
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!
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
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)
Maybe a tutorial of React Direflow or Angular Element about Web Component?
Which program do you use for making icons (UI/UX)
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
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 ?
Next Gsap + Smooth Scrollbar :)
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
Any idea on how to get SCSS into web components
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.
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.
Друг, ты крутой!
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
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
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 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;
"Pop pop!" - Magnitude
Does anyone know what the software was that he used to prototype with?
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
❤🚀
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.
How about web Components for creatiing of Views for SPA ?
What are you looking at
That's cool and all but... how do you package it up to distribute for others to reuse? 0_o
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).
Very odd. Where did you get the code for the "alert" and "search"????
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...
Lot of steps. Try getting lit-html, pretty cool lib
create your own class instead
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
Wait, are you saying people use wix sites in their portfolio?
I about died from laughter
source code please
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
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!
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
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.
This is ReactJS for poor)))