Links mentioned: Details automatically generated.
summary

Speaker doesn't apply generic part names. They use the part selector instead. Speaker is going to show m DN how the button should be styled. They are discussing the design of interactive components. Speaker proposes a declarative way for component design. Authors can opt-in controls to be style restricted. Speaker is going to look into selectors involving Combinator's and Linguistics pseudo-classes to see if they can take part in matching.

Speaker wants to create an attribute called host Styles to cover this type of use case. The idea is that it would start as a Boolean attribute and could be expanded to take values for customizing the behavior. Speaker would like the outer styles of a web component to match all the way down.

Speaker is tired after the last break. They are going to take a nap. Speaker is working on a side project. They are going to add a link to the Community web components to the list of links. Corey Lavista wrote a post about web components encapsulation and Page Styles.

Speaker is looking at the working something components group on GitHub. The group is discussing the standards for web components. Speaker is interested in seeing what's coming down the pipeline. They have added a link to the GitHub issue. Speaker created a set of web components for their work. They created a keypad to make a phone call from a nap.

Speaker's application looks different if they place generator elements into the light Dom, so they can be styled from the surrounding page. Bricks encapsulation is an important part of web components.

Speaker is interested in open source projects. They want to hear from implementers.

Speaker wants to know what they think about web components and the styling.

Speaker is going to send Jabez off with some traveling music.

topics
  • web components
  • dev effort
  • button
  • light dom
  • shadow dom
  • regular html
  • cases component authors
  • style bull
  • structures
  • shadow host supply
  • final break session
transcript

Welcome back your dreams were your ticket.

I welcome back that same old place that you like but those dreams have remained, and they turned around.

All right.

Oh, stretch it out.

Oh, So I said I was tired the last break and I think, I think I hit a wall.

I am just I am tired, but I was able to finish that one that last thing so that's done.

It should set me up pretty well for the upcoming week and laundry's done.

Put that in the dryer and yeah, just working on stuff by side project.

So After these.

After this Cipher, I am definitely going to take a nap or something because it's tired.

So what I am getting some done.

So feels good.

So let us see.

Wanted to go ahead and talk about this thing.

I saw on Twitter and see So I am a part of like so Twitter has these Community things right here.

Do I need audio?

Maybe I will add include audio.

And, so I came, I became a part of this community web components, right?

Well, let me copy the actual link to the web components Community copy link address.

I am going to add that to the list of the links, right?

Next to the recorded video so you can check it out for yourself.

And then I saw this post from Corey Lavista who we spoke about on the show before the creative shoe lace style, write a set of web components to be able to use in your projects so that you don't have to worry about them.

Like some really cool stuff we spoke about before you can check it out.

I am going to add a link to the actual tweet that I saw.

He says that there's some good conversation is happening around web components encapsulation and Page Styles like oh it's pretty cool.

And so WIC G is like the folks, kind of like the Let It Go.

The something group The what is it?

See, I know it but I totally forgot it now.

It's like the working something components group, or I don't remember but there are folks who kind of like talk about the standards and therefore web components, right?

So I open that it's a GitHub like I am so, like I said, I am out of words here, open it up, but it's a gift GitHub, like issues, and it's kind of like, showing all the different things there.

So web components should be able to easily adapt to host page while maintaining encapsulation, right?

And so is pretty kind of cool.

Like again, these are folks who are kind of determining the what the standards are going to be for web components, and so, it kind of see the thought process behind it is.

A cool.

Alright, so here we go.

And looks like it originated from Twitter thread.

So let me look at this and its mass is done through it as well.

I did add a link to this one, right?

You know, I don't like nope, not yet.

Add a link to the GitHub issue, so you can check it out for yourself.

Maybe add your own two cents to it about stuff like this.

I find interesting just to be able to again see like kind of like what's coming down the pipeline.

Okay, so let me check out.

These are Twitter things here.

So the point of web components was modularity and encapsulation.

Yes, Andre usability.

Also, sadly, the vision of using web components to encapsulate blocks of functionality that you can drop into any web page, and they just work and look like they belong without Dev effort to integrate.

The two is largely unrealised.

So basically, Yeah.

I mean so for example like if you have like a button that does something special right and you drop that into your overall application I guess there's their saying that without the dev having to do something, they want that button to look like any other button right?

Not just a special button, that's a web component.

Like any button should look the same, I guess we're the same, but There're things you can do.

But again, it there's a Dev effort to do it.

And I think they bring it up in the actual thread as well.

Oh and here's a, the question is it goes, suppose you want to create a complex component from lower level form controls by its like input buttons, Etc.

You wanted to be easy easily, usable across pages and you want it to adapt as much as possible by the surrounding page style.

Yeah.

And that, you know, that's kind of like similar.

Okay, so for my work, I created a set of web components.

Well I find it on here, do I have Done I hold on, SDK you?

I Jas.

I am pretty sure still under bondage.

Let me see, let me actually.

Okay.

So here is the actual like blog post.

I created And I am miles o since I am bringing it up might as well bring it up out of here.

So here's the blog post, right?

And so on of them I create is you can counselor So like, for example, so I created this keypad thing, right?

And so let us say you want to make a phone call from a nap and you don't want to go through and deal with all the different buttons and all these things or what have you in the input and all that stuff?

You just want to put in the element key hyphen pad or what have you, right?

You want to put it in and it just works.

All right?

So, I created this thing here.

And so, what they're saying in that thing, is that well by default, the buttons, look like this, right?

What if your buttons elsewhere?

Your application looks different.

Now there're ways to make it look like every other button, but what the original poster is saying is that They don't want it too.

They want it to be, just I guess it was just a regular button.

I guess I am saying like, indistinguishable without having to do anything.

Which, you know, I can understand.

And so yeah.

So your options are you place a generator elements into the light Dom, so they can be styled from the surrounding page.

That's weird though and Bricks encapsulation because again, you one of the cool things about web components is that like I forgot his name, but he said like Paul Lewis said that web components contain the gross and that's the encapsulation part.

You know, I mean, in the shadow Dom If you putting that out there is kind of like, but this second part is what I have been doing for my web components is like you liberally.

Apply generic part names and then that really, I don't do it.

Like, literally like it's actually like named button, so it's like keypad button and so you have the button to these controls and hope it becomes a convention to write button.

That button:: part button in base style so that authors won't need to edit their CSS in the future.

ER to accommodate your component which again I can kind of see that because with it you do have to put the part selector and I understand that There's some bootstrap thing, they're talking about.

And so the talking about a bunch of stuff.

Cool.

So, let us get back to the original thread, all right?

And so, they also bring up the part thing here, and custom Properties or css variables.

So, why do my talks?

And like, my workshops, I mentioned like, styling it.

And I mentioned part and custom Properties or css variables.

Let us see.

So this also affects built-in components as well.

So like input type file has historically been annoying for authors because even though it includes a button, the button does not follow the pages button Styles and needs to be styled separately.

So that's a good point.

So, this has been a problem from before.

Let me show you what that looks like.

So that's fine.

I am going to go show you it m DN.

So the button that they're talking about like we do like a type file, which again is amazing in just like regular HTML.

You get like this whole button here.

It just works that way, right?

And like Zoltan.

So they're saying that it's even hard to style that All right, back to here, and then they talked about for not interactive components.

All right.

Cool.

So then this is there's the old open style of ball.

Which I don't even it's a proposal I guess but I don't even know about that.

But I think for most use cases component authors need more control that indiscriminately pulling in all styles from the host page.

Also, this is probably somehow Point everything but maybe it's want to Target a certain thing.

So they talked about potential Solutions.

So you can't talk about problem without offering up some solutions, right?

So essentially Where am I?

Okay essentially what we need is a declarative way for component.

Authors to selectively opt-in controls to be style Bull from the shadow, hose styles with certain restrictions.

So that you end up essentially only getting Global Styles intended for these controls.

Rules like button because there are different like again words, there's different like modes or 4 buttons.

So there's like the hover effect or whatever.

Then like input type.

Number details, summary again.

Big fan of details, tag element popover.

And not random ad-hoc CSS code that could cause underlying styling could cause styling conflicts my thing, to follow instructions would achieve that.

Okay, so, let us see what here.

Obviously, selectors involving Combinator's so kind of like this, I believe with unexposed parts.

All this Shadow tree should not match and selectors cannot cross Shadow boundaries to match.

And again, like that's a cool thing about capsulation just don't outside.

It has something like outside doesn't really affect the inside and so, Certain attributes cannot take part in matching so ID class part data like the invalid data thing.

Any others.

Only user action pseudo classes.

And I will look into that and Linguistics pseudo-classes going to look into that can take part in matching, not structural pseudo classes.

Again, I am going to take a look into that, so we don't want things like a child to match Nuit.

See, and that was one of the things, like, in one of my components, I am kind of using like, unordered list like elements, and I was trying to get it to where you can style every other one.

I couldn't do it with Angela, how to use a CSS variable to make it work that couldn't do with part or can find any other way to do it.

So I actually had to use it for that, so maybe that's what they're talking about.

All right, unless we want to be able to pull in styles for more complicated structures like entire tables.

Wow.

Do we want to cover this type of use case?

So it's pretty cool.

They're putting it out there like, hey, we want to hear from the community about these things so the opt-in mechanism would likely be an attribute name to be, I guess.

I am not sure.

That means what that last be means some poor that's funny ideas hosts tileable.

Import style.

Allow host Styles.

A lot of host cells is not too bad.

Okay.

Okay.

Hopefully we can find something shorter than these.

Yeah.

What if we could just be like host Styles and just if it's there to means, it's true.

Kind of like the disabled attribute.

I don't know.

Doo.

The idea being the attribute would start as a Boolean attribute so kind like disabled L saying for but could be in the future but in the future could be, but could in the future, be expanded to take values for customizing the behavior.

Okay.

Thank you for like equals whatever.

Interesting.

So yeah, so maybe host Styles just by itself.

All right, so open questions.

How does this attribute?

Work across nested Shadow roots.

Oh, that's a chatter Roots.

So if you have like a web component within a web component kind of thing.

Okay.

Do we need an explicit opt-in, akin to export Parts, okay?

Or do we just Define it?

So that matching styles from all parent, Shadow host Supply, maybe that because I would think, well, again, this is for my use case.

Like, if I am using something within it, I would like.

For the outer styles to kind of propagate through to all the different elements.

That's me.

That's just mean.

It seemed like the latter could better preserve intent.

Yeah, so okay, so former this and Ladder is the parents Shadow, right?

Think See, that's what I thought was kind of like going for.

Maybe like how they just match all the way down.

I love to hear from implementers, would something like this be feasible.

How much implementation effort would require and are there any changes that would improve Implement ability?

Cool.

Another kind of it's going to talk about it.

It's kind of interesting.

See, you know, people talk about stuff that could be actually, you know, in later versions which is pretty cool.

That's what I like about like open source stuff kind of get to see behind the scenes of how the bread is buttered or something I don't know.

So they can talk about this thing here.

Also, again, Yeah, super cool.

Alright so yeah I am definitely going to like read through this.

All right cool.

Let me get you all back to work.

Because there's stuff I want to get done.

And yeah thanks for hanging out.

I will see y'all soon.

So let me know what you think?

Like have you been using web components?

Have you tried working on the styling?

What have you done?

Let me know.

But for right now I am going to get you all back to work.

Like I said, we will send you off with some traveling music because thing would work, and so we're going to send you off with new Jabez featuring a Pawnee be the track is called, thank you.

Thanks again for hanging out, so 15 minutes after the hour for the final break session, think you maybe take a look at an artist's website with some music and you will become a fan of the artist and yeah, thanks for hanging out.

See you soon till then I wish you much productivity and this is nujabes teaching up, Honey.

Bee, thank you.

Alright.

See you later music piece.