Links mentioned:
no links yet
Details automatically generated.

They have made their case. Now he's working on the client. Speaker helps them with setting up an event listeners and putting in custom elements.

  • instagram post
  • web component
  • css variables
  • custom element
  • radius background color
  • bc members

But those dreams have remained and they turned around.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Always good spotted rare, welcome back and a smile way, I think and I know you went to see you again.

Learn to me was there some it may be never lead you Welcome back.

Welcome back.

Welcome back.

All right.

How's everyone doing?

Hopefully, you're getting your thing.

Worked on, whatever that it may be.

I actually just so some backstory.

So I have this radio show that I have been doing, like, going on 14 years now.

I had a college station here in Orlando, Florida.

And, After the radio show, there are certain tasks and things that I do to help promote it, you know, because we record the shows, and we have the most podcast and think that nature for people who can't, listen, wife, kind of like these.

So that.

So I do a bunch of stuff I get recording uploaded, all these things and then I normally for the next day I save doing the promotional stuff.

So, like, emailing different radio promoters emailing.

Our mailing list of people who want to be contacted and the latest show is up and also posting to social media.

So because we take like little Snippets of the tracks that we are playing and posting to social media while the show is going live.

So people can kind of see and hear what we're playing and who we're playing cool.

So I take those clips, combine them and put them into a little highlight clips and then blast those out the following day, which is today.

A and so got a lot of stuff done.

So pretty much all the email stuff, the posting to Twitter and Instagram is pretty much done, but my co-host Big Shots.

My co-host, he hasn't been able to make it.

And so, like I said, when we do like the live playlist during the show, my co-hosts will go in tag the artists in the Instagram post, you know.

But now since he's not there, I am doing that now which adds some more time to think so recreating the website, you know and want to figure out because I have learned so much more since the previous website.

So I am thinking can probably automate a bunch of stuff.

So I have been kind of like, you know, thinking in the back of my brain, how I am going to automate certain things.

So yeah, that's that.

So all that to say I am a big fan of web components.

Random segue, but we're going to make that work.

All right, so then click, there we go.

All right.

So let me share my screen here.

I don't think I am going to need any audio.

So righty, this one share screen.

Okay, so for folks that may not know, I am a big fan of web components and one of the cool things about web components is that the style within the web component is encapsulated so you can style your web components the way you want.

And it won't leak out into the greater application, nor will the greater application influence, the web component.

Unless you wanted to.

So we will talk about that.

So, out of the box, there's encapsulation, which is great.

And, so I have used this, I have created this like demo to kind of show that.

So, let us see.

So as you can see here in The Styling, the H1, which is this is set the green, right?


So now let us answer the question.

So this input box and this button.

That's a web component that you can see in the HTML.

Right here.

So it's odd goat group.

Go type in group.

Go — Go — group is the web component.

All right.


And then we saw.

So the H1 is outside of the web component.


Now we're not going to guess any of the groups because we all know the greatest group of all time is Outcast.

So let us go ahead.

Now I made this demonstration this demo for a talk I gave for Lando devs like a while ago.

And, so I want to kind of showcase all the cool things with web components.

And so on of them was The Styling, other things like sending in and sending out actions and stuff and things but neither here nor there?


So I Outcast.

So we're going to show the style encapsulation.

So here we go, at cast.

Yep, it's okay.

Now you check this out here?

This let me inspect the element.

This is also an H1 as you can see right there.

But the cool thing is that it's on the web component and thus, in the shadow.


And so there's no leaking in or out of the Styles.

So I set it to Blue in my code here.

Where is it right here?

Some saying the style to blue and then you notice it doesn't leak out to here to the other one outside, which is cool.


I also have it to where I can.

If I click this it will change the color to red.

And then again, you will see that it doesn't leak out and affect this H1.

And, but yeah, so, Cool, so that's awesome.

So out of the box, you don't have to worry about your styles of your web components being changed in the outer by the outer application that it's in great now.

But what happens if you do want to change the Styles, right?

So previously using things called like a CSS custom Properties, or custom variables, and they're pretty awesome because You can just set like a variable.

So let us say main color here to Black in your actual web component.

And then the component on the out like the application on the outside can go and change that variable to blue and then that would.

So since it's that variable you're saying that variable your web component uses that variable and so it will change it to that which is cool.

And so basic usage, so they Right here.

Did they have one where there is an actual web component?

Not sure but that's pretty much the basis of it.

So you're able to custom properties.

We will see more examples.

I because I have it in what I have been working on this past week or two, so I don't see any.

Yeah, I don't see anything with what the parks or custom elements, but the issue with using CSS variables is that, I as a person who makes the web component, I have to, I guess have a variable for every Property that the person using the web component could customize and that can get super long like that and then you, I know, I will miss something.

So and that kind of like also like hinders what the user of your web component can customize.

So you may not have thought of something as the developer of the web component, but the user may have Wanted to change something that you didn't think of and so it kind of goes back and forth.

So or you may just want you no control over it, like you can only do these things.

So there's that.

So there's CSS variables or css custom properties for that.

But now let us say you want to just let the person do whatever they want to do with your web component or what have you style it?

However, they want.

So now when I was so that's what we were doing.

So for context, I for my job, make shots of good Folks at Vonage.

They allowed me to create stuff with web components.

And so because even before joining bondage, I was big into web components.

And so when they ask like, hey, is there anything you want to work on?

Like hey web components and I have made my case.

They're like hey using these custom elements will make things.

So much easier and more straightforward for people who want to use our apis and like sdks.

So I primarily work on the client SDK.

So if you want to use our stuff in the front, end SDK makes it a little bit more straightforward.

So know, you know, the worry about making calls and stuff.


I was like, well, what if we could abstract that one even more to where you just put in these custom elements, you say what?

Like an identifier is and it just automatically works.

You have this worry about setting up an event listeners worrying about like different.

So setting up event, listeners sending out events, all that stuff.

Like it does everything for you.

And all you have to do is just put a simple HTML element tag and some JavaScript so that it recognizes it.

But other than that you have to worry about anything else.

We handle all the other stuff as far as elements.

So I created a set of web components UI elements and it was just kind of proof-of-concept, just kind of throw it out there, see what people thought about it.

I honestly didn't think anybody would use it.

I just thought it was just me doing it, but apparently people use it.

And they wanted to be able to customize and style it because I am not the greatest Styler.

Everything was like the vanilla styling of every element.

So like the input in the buttons were just vanilla.

So I went back, and I was like, oh, let me see how I can style these and first I was thinking, all right.

CSS variables, and I was like, oh man, I got to go and figure out all the different parts that could be styled and make CSS variables.

For my like, ah, I was kind of dreading that.

So I did more research and came across parts.

So it's I am not sure how long it's pretty recent maybe within a couple of years because I saw some articles about it and those they're like, well, it could still change, and I was like two years ago.

And so but now it's in Mozilla developer Network, Sam DN and this is like a place I go to and so there's so the compatibility is Chrome Edge Firefox, Internet Explorer, which is not really being developed anyway, so but all the pretty much major browsers, it's good for.

So yeah, so all pages.

So now part, what part is it allows you to be able to name certain sections of your web component and give them like a name?

Then the person using your web component, can just use regular CSS to style eyes.

Whatever that thing has.

Like if it's an input, then you're able to stylize just as if it's a regular input.

So, there's no worrying about having two sets of variables.

To Let us I want the Border radius to be this.

So I would need whatever's custom variable border radius, and then have the user.

And you just, Stylize it as if it's a regular input.

So for example, they have this thing here.

So it's like a pseudo element.

So if you're asking like the focus and hidden and all that stuff, so it's kind of like similar to that.

And so you have your custom element the name and then two colons, and then part, and then whatever you named your that part of your web component.

So it's like, it says styles to apply to the food part.

So, So this is what it looks like.

And so yeah, so it's just regular CSS.

That's how you would style.


It's kind of amazing.

So here's the HTML of it.

So here is the tab custom element.

So that's the web component or custom element there.


And this is just the code to create that custom element web component cool.

Now, the CSS of it here.

So as you see here, here are the parts of it.

So there's a tab.

One tab to Tab 3.


And so the part they all have part tab, but this one is also added on is active.

All right, so now Here it is.

So here's the name of the elements here.

The two colons part and the name of the part that they set here tab, right?

And so, you can see here.

They plot just regular CSS.

Where, as before with CSS variables.

You'd have to set the variables and then set them in here which would be.

So here.

You have a set the color border bottom.

Well, what if the person wanting border top?

So you'd have to have all these different variables?


So then here again, you can set the hover the active, so hover and active, and then the focus, and then you can see right here.

They have this active part where they're changing the color, and the Border color.

And then the JavaScript to kind of make the actual web component work.

So you just you select it and then you extend the HTML element and then you attach a shadow Dom and all that stuff.

So this makes the web component work, and I am probably going to go over.

I wish I knew.

But all right, this thing is so awesome.

So as you can see here, this tab is active and it has the actual active class that from the part.

And so you can see is they just it just works which is kind of cool.

So they're able to create and customize a stylized that H that web component with just CSS instead of having to worry about.

Well, what are the CSS variables?

And all these things that try to remember.

You just regular CSS, which is great.

So basic CSS.

I mean CSS variables are regular CSS, but More basic is just doing this and it opens up all sorts of opportunities for people to be able to customize what they want.

So with all that said, let us take a look at a couple of the ones I have been working on.

All right, so, all right.

So here is the in order to include this w.

This web component.

All you do is just put VC — text — input, and some JavaScript, like I said to, so that the browser would recognize that it's a custom element and it will just show up and here it is blah.

All right.

So now this is out-of-the-box styling.

I think it looks all right.

I mean, again, I am not a great stylist or anything, but this is out of the box.

Now, let us say if you wanted to change the styling.

So let us take a look at the code real quick.

So this is what it looks like out of the box here is the actual code for it now.

And you can see, I am still using some custom CSS variables stuff.

But if you wanted to, you don't really need to.

But so this is made up of an input and a button, correct.

So, alright, so here is the part of renders.

So you can see here on the input and it's called the part input.

And then for the button is called the button.


So now when I go to let me show you.

So that's what it looks like out of the box.

Let me show you with some custom styling.

I think the wrong button.

Save, let me see how it looks.

So much more different from before.

So, yeah, so let me see CSS.

So now, instead of having to worry about.

Oh, I need a CSS variable for the border, radius background color, the color of the text.

All that stuff is just by using parts and the name of the part.

I can just use basic CSS to style it, which is kind of cool I think.

And so let us say so you can see here.

I change the color.

Made a the Border green.

Let us say if I want to make the background of the button to be transparent.

So then just background-color:transparent Evette and there we go.

So you're giving the so you're taking your web component and letting the user have like complete control of the styling so that it fits into their application more.

So, it seems it's more seamless.

And so I think this is kind of amazing.

So that's pretty cool.

So yeah, so you can see could be able to create it.


There's a couple of things that I came across.

I wasn't able to figure out so but here's another example it, what's up.

So this is the messages.

So this is how it looks normally right.


Let us say you want to stylize it some and this one.

I stylize the junk out of it.

So here take this island off, see that.

Look at that, that's amazing stuff.

Got shifted in different places.

And I don't know, I found that super cool is just CSS to do it.

So it's amazing.

All right.

So now, one of the things I found that was kind of where.

So if you wanted to get a list of the members, in your conversation, you can just put VC members, and we will have it there and it will update as people come in and leave.

So you don't have to worry about all that stuff.

You just put that and you're good to go putting a conversation ID.

It knows what to do with the recipe?

But the thing was I was like, well, It'd be cool if we could have like a striped.

List of members.

So like the odd member so like Alice and Carl would have maybe like a background as different from Bob?

So be kind of easier to differentiate everybody or what have you, right?

And, so I thought I could do and set the nth child because that's how you would normally do it.

You do like ants, child odd, and then you'd set the Styles and things.

So I thought I could do that by just putting like, you know, and Oh, yeah, so like and child and then odd.

But that didn't work for me.

I tried all sorts of different things.

I looked kind of searching the internet for it, couldn't find anything about it.

So my last resort was going to Twitter and be like, hey anybody know how to do this?

And, and then luckily shots of some folks who did some retweets and things.

Luckily, the person who wrote, the spec, basically told me, like now you can't do it like alright, cool.

So it wasn't just my lack of CSS knowledge.

So but as you just can't do it.

So to work around that.

Oh, what I had to do was again, go back since it was something so like Specific.

I didn't feel too bad about creating CSS variables for it because it's like a specific use case.

So as you can see here, I have the BC members and child odd color, and the VC members, and the child even color.

So that way, you'd be able to style it the way you want it, if you wanted to have like Stripes, right?

So, this is how it looks out of the box.

Now, when you apply your own styling, you can make it look like.

Back if you wanted so you can see you can customize.

However, you want it to look.

And instead of having to do all the CSS variables, for all these different things that I could change that normally come with the element.

You can just do it.

Just out of the box of have without having set up the CSS variables.

So my goal is I hopefully showed how part is kind of awesome and it can be used to make.

Your life so much easier, if you're developing web components and you want people to be able to style it to fit their application as they see fit.

So, yeah, that's that.

And then there's also now a thing, so just how there's like part there's theme and there's like exported parts.

So if you so exported parts, if you wanted to If you have like a web component inside of another web component, and then you want to be able to style that first that outer web component, but then be able to style this stuff on the inner web component.

You can have stuff called exported parts, which is a whole nother thing.

And then there're themes, like there's theme how they're just like others part and then you can I don't even fully understand it yet.

Like I just came across that like a couple days ago.

But yeah.

So part, it's kind of awesome going to use that to style.

Web components.

And if you have ever done anything like this before, please let me know if you have done it any other way, or you found what works best for you.

Do you, have you been using CSS custom variables or custom properties CSS variables?

Like, let me know.

So again, this is what I know, so far about it, is from what I understand and hopefully, you know, you will let me know if you have anything.

So I just thought that was super cool.

And so I wanted to kind of share that.

So, thanks for listening to me, ramble about it.

And so, so now, these are the type of things that if you find anything.

Fascinating, interesting, like this is like, this is like a lightning talk kind of thing.

And so if you have anything similar and you feel cool that is cool.

Feel free to sign up for the show and tell and do what we just did here.

All right, cool.

I blabbed on longer than I wanted to.


The end.

I will add more time.

So you will get more time back but let us get y'all back to work.

So hopefully you found that cool.

Let me know what you think if you ever used it.

If not, if you have any tips for me, if you haven't and maybe you're using CSS.

Do you find that?

This would be easier for you?

Let me know.

And yeah, think that's going to be it.

I am going to share my screen, so we can get up out of here.

And again, thank you all for hanging out.

Get you back to work.

And yeah, we will be back 15 minutes after our and unless we have any show-and-tell stuff will go over a producer of London's website and play some music and stuff.

So, alright.

So again, thank you all and share my screen.

We are here.

Thanks again.


All right, she will audio.

Here we go.


All right.

Thank you.