Intro to Web Components - Full Walkthrough

A brief introduction of web components technologies, best practices, tricks, and guide for web app components. How to create simple custom elements, pass and consume data through attributes and properties as well as how to extend template with slot placeholders.
Join this channel to get access to perks:
/ @beforesemicolon
[Mentioned Posts]
Web Components Full Walkthrough Article: / intro-to-web-component...
10 CSS Tricks to Learn: / 10-css-tricks-you-need...
Audio Player Web Component: • Custom Audio Player wi...
Date Picker Web Component: • Custom Date-Picker wit...
Style Card Post: • Btyle blog, renting, s...
Style Text Underline: • Custom Text Underline ...
[website]
beforesemicolon.com
[Blog]
/ beforesemicolon
[Follow]
- Instagram = / before_semicolon_
- twitter = / beforesemicolon
- facebook = / beforesemicolon
- codepen = codepen.io/beforesemicolon
- reddit = / beforesemicolon
[Source Code]
github.com/beforesemicolon/BF...

[@BeforeSemicolon]

Do you use Web Components in your projects at all? If so, how do you build them? - from scratch - using a package (which one?)

[@DarrenbyDesign]

I personally use Lit because it feels easier to get started and maintain my components. I am not very well versed in advanced JS so Lit helps me build things with enough understanding quickly

[@BeforeSemicolon]

Hi Darren, thats good to hear. Im currently working on a Web Component simplification solution that would like to get your feedback on. www.npmjs.com/package/@beforesemicolon/web-component It has few advantages compared to Lit but would cherish your view as a Lit developer.

[@DarkEternal813]

This single video was more helpful to me than any other resources I could find on Web Components. I read documentation, looked at code examples, took classes, and this single video is SO MUCH BETTER at explaining the how and why of using Web Components. AND you even give best practice advice!? AND give accessibility tips!? You've gone above and beyond in this video, thank you so much!

[@BeforeSemicolon]

Thank you. Really appreciate the feedback. 😊

[@Arthur-cx1cg]

Totally agree. Read a lot, watched a lot, but this video has much more step by step guides and info, with proofs, pros and cons, and amazing examples.

[@BeforeSemicolon]

Thank you Arthur. I appreciate the feedback😊

[@simobermaki]

I came here looking to learn about Web Components, and boy did i learn a TON OF NEW STUFF.

[@BeforeSemicolon]

Thanks so much for this. Stay tuned😊

[@blessdarah1256]

I've been looking for something very elaborate as this. Thank you for this course.

[@BeforeSemicolon]

Anytime. 😊

[@MrBoiks]

This content feels like a breath of fresh air... Like thankyou.

[@BeforeSemicolon]

Thank you chief 😊

[@roym4457]

the best web components course on youtube

[@BeforeSemicolon]

Thank you :) Welcome to BFS

[@morethanpixls]

Dude, amazing walkthrough. Liked and Subscribed.

[@BeforeSemicolon]

Thank you and welcome to BFS 😊

[@ebsector]

Best explanation on web components I have seen

[@BeforeSemicolon]

Thank you. That means a lot. Appreciated:)

[@jackob_music1595]

Thanks for this helpful video!

[@BeforeSemicolon]

Anytime:)

[@MuhammadQosim]

Your Way to make tutorial video is helpfully amazing!

[@BeforeSemicolon]

Thank you Muhammad. Appreciated 😊

[@SharpOar]

Nice job. Thanks

[@BeforeSemicolon]

Thanks for feedback @Raul.

[@kikleine]

Excellent video. Nice speed too :)

[@BeforeSemicolon]

Thank you 😊

[@DarrenbyDesign]

This is awesome! Thank you

[@BeforeSemicolon]

Thanks for the feedback. Appreciated

[@AlexDudeOriginal]

Highly appreciate this content bro

[@BeforeSemicolon]

Yeah, there are these gotchas that trap you for sure. Thank you and stay tuned for more

[@romilsikka2572]

bro awesome work amazing job thanks a lot

[@BeforeSemicolon]

Thank you. Appreciate the feedback. Welcome to BFS

[@ikechukwuvalentine824]

Thank you for this useful content. There's not much resources on web components bad the downside is that it's not supported well on all browsers.

[@BeforeSemicolon]

Im here for anything related. I still believe in the technology.

[@patricknelson]

I'm a dinosaur and had been using jQuery still for years on a large long lived project (for various reasons, partly due to legacy code maintenance). However, one time a year or so ago I was in a pinch and needed to built something somewhat complex that needed to exist inside of another website but obviously couldn't be an . I looked into web components and, with *no build system* at all, was already immediately off and running with a solution. That's one huge advantage of custom elements and the suite of other standards (which we collectively refer to as "web components") offers: "It just works" and it works out of the box. Super fast, native and etc. That's not to say other frameworks aren't very powerful as well, it's just that it offers you so much with so little overhead that it's hard to deny the utility of web components. _Particularly_ if you're looking for ways to integrate them into a legacy codebase.

[@BeforeSemicolon]

Web Components is perfect for you then. If you truly want to remain close to vanilla and get additional help, consider cwco.io . Think about it like jQuery for web components

[@josefranciscodelarosaibarr6477]

Great job! I'm moving to web components and this video is usefull to me. Thanks a lot. I wonder which extention are you using to format HTML code into a JS file...

[@BeforeSemicolon]

Thank you and you’re welcome! I dont’t quite understand what you are asking here. For this video I used plain Javascript to do everything but if you are looking into small and easy way to handle all aspects of web components consider trying this tool www.npmjs.com/package/@beforesemicolon/web-component

[@TheBorninmotion]

OMG , thank you bro its just what i am looking for , i am currently using vue with nuxt on my projects but looking for something to get out from frameworks and its dependencies , is it time to start with web components or i should wait a little bit, what do you think about it ?

[@BeforeSemicolon]

It is the right time to jump on Web Components. You can even go ahead and use Web Components with Vue and slowly make that transition. Web Components is not a replacement for libraries like Vue but for sure a better tool to build a UI library

[@vipulkumar3066]

Nice

[@BeforeSemicolon]

Thanks 😊

[@indratanaya5701]

Wow, this is a very nice video, man! What extension do you use to highlight those HTML wrapped in a string?

[@BeforeSemicolon]

Thanks. Im using WebStorm which already comes with everything.

[@indratanaya5701]

@@BeforeSemicolon Oh I thought it was VS Code hahaha, thanks man!

[@BeforeSemicolon]

Yeah Im an Intellij guy

[@ikechukwuvalentine824]

The extension is comment tagged templates. Super useful.

[@antheus_s]

You can use the es6-string-html extension by Tobermory with prettier for formatting or lit-html by Matt Bierner. Edit: This is applicable to VS Code.

[@bonsayeb9620]

Thank you very much for this video. I noticed that while your in your JS file, your VSC is able to recognize HTML syntax, how do you get VSC to recognize HTML syntax in a JS file?

[@BeforeSemicolon]

Thank you. I dont use VSC. I use jetbrains WebStorm or Intellij for my videos.

[@ikechukwuvalentine824]

An extension called comment tagged templates

[@aspiringengineer]

Thanks for the video! What do you think about the effect of using Web Components on web performance? Is it better than using React, Vue, etc?

[@BeforeSemicolon]

Web Components is not necessarily a replacement for those libraries and frameworks. It is rather a complementary feature. What those libraries can do is use web Components under the hood to reduce their size with more benefits. WC is already performant and there are cases it is better than those. For example, if you create a UI library with it, that library will work with any other framework. If create a UI library with react it will not work with Angular or Vue and vice-versa. I wrote a more detailed article on WC you can check link.medium.com/Nj4JIAPhYjb

[@annisanadia]

​@@BeforeSemicolon Does it mean to reduce the size we use Web Components inside the app built with those libraries, or we compile the app into Web Components? And you said WC is already performant and there are cases it is better than those libraries. So does that mean benefit of WC is just the interoperability, since WC & library like React are both has the same level of performance? I'll read your article.

[@BeforeSemicolon]

What I have seen done more and more frequently is using those libraries and frameworks to build things but compiling everything to WC for the browser. Raw WC is pretty rough to work with at a scale and all these popular libraries already solved that. By compiling into WC you get the added benefits of not shipping the core system that the components need to work with the library since the browsers will have it which results in smaller bundle.

[@BeforeSemicolon]

I believe that there are cases where WC is even more performant because browses are constantly optimizing to better compile native things. Browsers dont optimize to run React, Vue or Angular in a better way and it is these libraries that often change to give browsers better things to compile. I dont have the data on that so I am just assuming here

[@miklosnemeth8566]

@@BeforeSemicolon In this question I disagree, the biggest enemy of web components is React itself. React has its own component model It doesn’t need web component infra. When you start using Lit and Lit-element you never need React any more. Even Bootstrap can be used with web components.

[@jackob_music1595]

Hello! I have a question: Is it possible to send a function to a web component from the outside of it? I'm struggeling on this for over 5 hours now. I did a modal component with a lot of attributes (description, title etc.), but I need to get some specific backend functions to the component. Do you have a way to do this?

[@BeforeSemicolon]

You can pass anything to the component using properties on the component element like I am doing with data properly. Out of curiosity, why do you want to pass a function to the component?

[@jackob_music1595]

@@BeforeSemicolon I want to pass a function to it to perform actions on-click to a button in the component. I could write these functions in the component, but that would make the file extremly long ig

[@BeforeSemicolon]

Use dispatch event not callback. Dont pass function to component to be called. Inside the component do: this.dispatchEvent(‘eventNameYouWant’) Then outside do: const yourComponent = document.querySelector(‘your-component-tag’); yourComponent.addEventListener(‘eventNameYouDispatched’, event => { console.log(yourComponent.propertyYouWantToRead); })

[@BeforeSemicolon]

Read this article for full details link.medium.com/V2HvVIYI0ib

[@jackob_music1595]

@@BeforeSemicolon Thanks!

[@husseinalwajedi8756]

Great explanation, what is the name of your VS code theme?

[@BeforeSemicolon]

Thank you. That’s actually WebStorm IDE. Using material Atom Dark theme

[@edalpez]

@@BeforeSemicolon I like your IDE setup, how did you hide the tool window label and only show the icons?

[@BeforeSemicolon]

Some IDE have “no distractions” view mode you can remove everything. I use jetbrain IDEs but this one was what used to be FREE app to code.

[@edalpez]

@@BeforeSemicolon Yes, I am using Webstorm IDE also but i can't customize the tool window and keep the icon only.

[@BeforeSemicolon]

Tried this? www.jetbrains.com/idea/guide/tips/distraction-free-mode/

[@JacoFett99]

I'm doing a project that uses web components at the moment and I cannot find out how to select my custom element in the DOM. My script inserts my and I try to document.querySelector('custom-element') but it returns null! If I go into the console and type the same thing in, it finds my custom tags. My Web component works as normal, I just need to select the tag to change the attribute. What is happening here? There are no posts I can find addressing this.

[@BeforeSemicolon]

Jaco first of all, let me save you a lot of trouble bu suggesting something like this cwco.io Where you won’t need to query select or do any DOM manipulations. It also automatically changes things and handle data for you. No need to worry about those things

[@ikechukwuvalentine824]

It always works for me, try using Firefox dev or chrome.

[@miklosnemeth8566]

I regard myself an expert in web components, still I have learned a lot from you. The biggest problem for web component is React especially since it has the hook paradigm and huge aficionado community love hooks. React needs no web components, zero benefit, just problems.

[@BeforeSemicolon]

I would love to challenge that. I created a Web Component library (cwco.io) that can be used to enhance React in performance, data context and reusability. React components only work with React but CW components can be used with any library or framework. If I create a UI library with CWCO I only have to maintain one library and use it with any project type. I can still use react to take care of other things and together build a more powerful application. Learn more: cwco.io/documentation/getting-started#react-project

[@miklosnemeth8566]

@@BeforeSemicolon It's to late to watch your movie on CWCO, but definitely it will be my top prio task for tomorrow. :) I am really curious, especially how to integrate the browser-standard event machinery with React, react doesn't support custom events.

[@kibem.c]

Hi, just a question. How would I make a component that is similar to angulsr directives? For example, a directive that opens a modal when a button is clicked.

[@BeforeSemicolon]

You cant create directives natively. What you can do is simply listen to a button click event and call a function that opens a modal. Do you have a angular code example that you would like to replicate with web Components?

[@kibem.c]

​@@BeforeSemicolon Yes I have a angular code example, but your comment has given me an idea! I can use the "is" attribute that listens to click events and opens a modal You think that might work? Thanks for replying

[@BeforeSemicolon]

I dont know about “is” attribute. If its not angular there is no way for directives so you just need to listen to click events by setting event listeners

[@whatthefunction9140]

it would be great if you would add chapters

[@BeforeSemicolon]

I will add. Thanks for the suggestion

[@ferdygnteng4712]

bro, I want to ask a simple answer, it's okay. What's the difference between using the web component and using as a font on icons?

[@BeforeSemicolon]

Sure but i dont quite understand the question… You want to know the difference between using web components and font icons?

[@adren.official]

how can i highlight the HTML syntax in js?

[@BeforeSemicolon]

I use WebStorm to code. It comes with HTML syntax highlighting by default.

[@miklosnemeth8566]

VS Code supports JS template literal syntax highlight, too

[@BeforeSemicolon]

What plugin do you use?

[@miklosnemeth8566]

@@BeforeSemicolon lit-plugin by Rune Mehlsen

[@devT44]

You have shown when delegatesFocus:true is applied, entire webcomponent get focused automatically as well along with focused element. But this is not happening in my case.

[@BeforeSemicolon]

maybe its a browser behavior. What browser and version are you using?

[@devT44]

@@BeforeSemicolon chrome 115. Also checked on Firefox. Same result. I am using windows10. Is it working differently in my case because, I am using different os?

[@BeforeSemicolon]

I dont think OS matters here. Are you using my code? If not, can you share?

[@none0n]

Any idea on how to get SCSS into web components

[@BeforeSemicolon]

Just can’t. It has to be CSS. With CWCO you can link to a stylesheet file (cwco.io/documentation/stylesheet#import-stylesheet) which can be SCSS as long as it is being handled(parsed)

[@none0n]

@@BeforeSemicolon I am able to link and parse the scss with webpack, but I get an error when I try to use `this.shadowRoot.adoptedStyleSheets = [ButtonStyle];` buttonStyle is an imported SCSS file, which is supposed to have been transpiled by webpack

[@BeforeSemicolon]

Simply add the “link” tag with the path to your parsed style inside the shadow root like a normal tag. Dont use the “adoptedstylesheet”

[@none0n]

@@BeforeSemicolon thanks