Custom Web Component Behaviours and Events

This is the fourth tutorial in the Web Components Series.
This video explains how to hook into the append and remove behaviour for adding a web component to the page, how to listen for changes in the content inside your slotted elements, and how to add events to specific elements inside the component that can trigger functions within the developers' own code base.
code from video: github.com/pro...

[@jamiek2039]

Watched all of your web component videos, great job!

[@pasduroc5422]

Really good videos !! (the fours) Thanks

[@FelixLuk-g9l]

Hi Steve, thanks for the excellent series. I now have a better understanding of custom web components. May I suggest you to create a follow-up video to the series? A custom web component of "confirmation box" is something a lot of people would like to have, but unable to create on ones own.
A confirmation box is a bit more difficult is it passes a value back to the main DOM, which is not required for most other HTML elements.

[@SteveGriffith-Prof3ssorSt3v3]

Thanks. I don't tend to do videos that are solutions because that is what I get my students to build. Wouldn't make sense to post the answer.

[@northborneoguy]

Hi Steve. Thanks for sharing all these videos for years now. Your style of teaching is the best and you don't try to sell anything.
Just one quick question. Is it possible to make a full time income doing web development freelancing job by knowing just HTML, CSS, Javascript, React, and Node JS? Thanks!

[@SteveGriffith-Prof3ssorSt3v3]

Lots of people do.

[@rs832]

Thanks for the wonderful series on web components (and the many others). I am trying to create a navbar web component so I can easily add it to every page of my bootstrap application, but I cannot seem to get the drop-down functionality to work as expected. Could you please point me in the right direction or let me know if I'm barking up the wrong tree in attempting to use bootstrap and web components together? Many thanks, Professor!

[@SteveGriffith-Prof3ssorSt3v3]

Try not to think of the components and the ui framework as being part of the same thing. You don't want to import a huge CSS library into a component. The component should have just the CSS that it needs to control its layout and positioning. Stuff like colors and fonts can be inherited.
Components should be minimal, agnostic, portable, and easy to add to any website.
Build the component so its layout and functionality work without anything but the code that you write inside the component.
Then think about using CSS custom properties (variables) to be able to set colours from the parent site.

[@ceyhunkucukali2864]

Hi Steve, when I make an addition to main with the sample component you gave, the button does not appear why?
setTimeout(() => {
const bb = document.createElement('big-bang');
const btn = document.createElement('span');
const title = document.createElement('h2');
title.setAttribute('slot', 'title');
title.textContent = 'Test title ...';
btn.setAttribute('slot', 'done');
bb.innerHTML = `Done`;
btn.textContent = 'OK';
bb.setAttribute('action', 'hello');
bb.append(title);
document.getElementsByTagName('main')[0].appendChild(bb);
}, 1000);

[@suatbayrak2703]

Hello Steve, 13:20 I have changed my attachShadow mode property to 'open' but I still cannot access when I inspect the page with devtools, running document.querySelector('root') on the devtools console, returning null.

[@axMf3qTI]

So why use a library as Lit? Is that just syntactic sugar or does it offer something over native web components?

[@SteveGriffith-Prof3ssorSt3v3]

Using a library or framework means you are using a wrapper around the web component functionality. They are meant to solve common problems, give you some base styling and boilerplate code to save you time.

[@fanyang-ev2bm]

Hi, Professor Steve. I see that there seems to be a problem with triggering events in the tutorial. [slotchanged] should be changed to [slotchange]

[@SteveGriffith-Prof3ssorSt3v3]

Thanks.

[@BobMossanen]

Excellent presentation and content I like => showing like icons what setting in Vs code did you use?

[@SteveGriffith-Prof3ssorSt3v3]

It is the vscode-icons extension

[@lotharschmid656]

I searched 30min why this window[this.action] undefind.
I have made html File the main.js import with type="module". This not works. The window object has not the properties from main.js.😅

[@SteveGriffith-Prof3ssorSt3v3]

yep. If the main script is a module then that contains the scope and doesn't add things to the window object.

[@raeesahmadkhan6862]

Hi, Professor Steve. I love your videos' fantastic content. I want to ask if you are coming with React.js content anyway soon in a month or 2?

[@SteveGriffith-Prof3ssorSt3v3]

I made a new Playlist on React that was last updated last Fall

[@raeesahmadkhan6862]

@@SteveGriffith-Prof3ssorSt3v3 alright great. I just saw them. I am starting to learn react.js soon. I am hopeful about two playlists of yours.

[@magicja]

my HTML slot always returns undefined. ` let btnSlot = this.root.querySelector('p button slot');
let htmlSlot = btnSlot.assignedNodes()[0];
console.log(htmlSlot);`

[@JensensHus]

What is the extension that colors the inline called?

[@SteveGriffith-Prof3ssorSt3v3]

What inline?

[@JensensHus]

@@SteveGriffith-Prof3ssorSt3v3 I mean the inlined code has different colors based on how inlined it is.

[@SteveGriffith-Prof3ssorSt3v3]

@@JensensHus I think that comes from rainbow indent.

[@JensensHus]

okay thank you @@SteveGriffith-Prof3ssorSt3v3

[@BobMossanen]

I downloaded the code from get up what command can I use to run it on the browser?

[@SteveGriffith-Prof3ssorSt3v3]

The Live Server extension in VSCode is how you can run any website in the browser.

[@BobMossanen]

GitHub was cloned how do i run it on the browser

[@SteveGriffith-Prof3ssorSt3v3]

This is part of a playlist about web components - th-cam.com/play/PLyuRouwmQCjnENQk6NJlckZRXOfQP0x5B.html