• web component
• shadow root
• felt renderer
• shadow dom
• custom elements
• render content
• static html
• performance implications
• template element
• contents
• full fidelity initial paint

Welcome back, your dreams are your ticket.

Welcome back that same old place that you laugh about.

Well the number of all changed since you hung around, but those dreams, everything.

We got him on the spot.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Always good spot rare.

Welcome back and a smile way, I think and I know what to see you again learning.

Was there some?

Hey, what's going on?

Alright, so we're back.

This is the second break said the first Cipher and yeah, let us happen to it.

So this figure to going to go over some pretty well.

I think is cool technology.

That's kind of coming to like the web which is amazing because the web is Growing and getting better, you know as technology and thing moves on like it doesn't say stagnant, which is cool.

Well, unless you want things to stay the same so you never have to learn he ever again, but maybe this is not where you want to be.

You know, I mean, it's because it's always which was what I like because I believe it's getting better and I want to show something that I think is the case makes the case.

Alright, so I am going to share my screen and then I am going to need audio because when I Video, excuse me.

All right, I can see my internet is a going terribly.

That is great.

All right.

So let us go ahead and get this started.

All right, before my internet cuts out, which will probably happen, Okay, so Sharing screen, share audio.

Great, here we go.

All right.

So now I am a big fan of like not repeating myself like not running the same code over and over again, especially if it's something that I am going to be needing a lot.

So as example, right here on this very website like if you go to Until it dot Works / about, I am going to copy and paste this so that the links will be along with the recorded video so you can always check it out.

But if you go there, you will notice this thing here.

Now, this is a web component, right?

And I think, I can just view inspect.

Let us see here.

So yeah, so here's the web component and it's called Dwayne — made and I make a lot of random projects.

And so instead of creating an about page over and over again with the details of the website.

I figured this would be a good case to create a web component so that I can just pop that into the site and then it would just automatically work.

So what's happening is that the Dwayne — made you can pass in.

The URL to an endpoint that will fill out these certain sections of the site of the web component.

So that like the about is specific for every the about specific for every side project.

I make same thing with the built with because I make things with different Technologies and then the different updates if there're any updates.

So all that comes packaged just in that web component, which I think is pretty cool.

And a reason why I liked it.

Now, the thing is, is that to use this Then the head tag, so I need because the browser doesn't understand.

Dwayne — made it understands like H 1, P tags a tags, you know, things like that.

So for it to be able to understand what Dwayne — made is.

We have to include some JavaScript, right?

And so as you can see here, oh and this is for another one.

I have the timer.

That's another web component.

But so you can see.

So there's like normally like to Script tags that I need one that says.

Hey, what a web component is to the browser kind of thing so that it's like okay, cool.

And so and then also the JavaScript that comes across where it's like, where the browser comes across.

This thing first is like, oh, there's this thing called Web component, come across Dwayne — made.

Oh, must be a web component and then it goes to the JavaScript to handle all the rendering and stuff.

So that everything comes out the way it should.

Cool.

So now the thing is, there's not much interactivity with this.

This is pretty much static.

Right?

None of this stuff changes, doesn't need to be changing like real time or anything.

Right?

So it's basically making a call to an end point getting the data and filling out the spots so you can pretty much say it's static.

Right?

So, but the thing is, you still need the JavaScript to be able to render it properly.

Because and this is what we're going to talk about.

There's really no good way of rendering web components on the server.

Because what would be cool is that send a request to the page, the page sees like, oh, there's this web component.

Let me render this web component on the server and then just send down just regular HTML, right?

Because that's pretty much what all this is.

If you go and look at the inside.

You see is just regular dis HTML inside of the Shadow root, which we will talk about.

So, yeah, so you see, it's just regular HTML.

Nothing.

No, JavaScript needed, right?

We need JavaScript to render it because the web component.

So there have been ways to get server-side rendering of web components.

And so some folks that I have used before.

Right here.

So this is stencil and I have used stencil before to make webcams.

Matter of fact, I think the Dwayne — made was created using a stencil remember correctly.

All right, so because there's a while ago, I did it.

So now stencil has a way of being able to do server-side rendering of web components.

And so what it does, so let me post a link too here.

So this kind of talks about how it handles.

There were side rendering right.

So, so alright.

So server-side rendering is the process of rendering content to a client based on an HTTP request.

A client makes a request and the server processes.

It returns rendered HTML back to the client.

Now, the client then hydrates that HTML and bootstraps the client side JS app.

And so that's their the way they're thinking about doing it.

So they render it out.

Out on the server, and then they ship down the HTML down to the client.

And then if it needs any JavaScript or anything in hydration, they will do that.

On the client side.

That's only place you can do it.

All right, and then you can also do static site, generation.

So now they mention that, if a page simply must be certain because they talk about the limits of stuff here, too.

So, it's good reading.

That's why I posted a link.

If a page simply must be server-side rendered, then that can be done.

Using stencils.

Hydration functionality.

In any node js?

Base server.

Cool.

So again, this is a node-based.

All right, so that then that link takes you to the hydrate app.

Let me post a link to this as well.

To do.

Great.

So now the hydrate app.

What this basically is doing is so is a bundle of your same components but compiled, so they can be hydrated on a node.js server.

So they do stuff to the code to your components so that it could be hydrated on a node.js server.

This is the same node js app which pre-rendering uses internally and because you can pre-rendering which is pretty cool and the same one which angular Universal SSR because angular can also create Server-side rendered apps uses for Ionic cool.

Now, like stencil components.

The hydrate app itself is not restricted to one framework.

So you can use it like view.

React.

What have you?

Cool.

Now note.

The stencil does not use Puppeteer for server-side rendering or pre-rendering because I guess.

So stencil has their hydrate app, that does stuff but another way of getting the like a web component.

To be server-side rendered is to pretty much.

All right, you have you call your site in something like Puppeteer, which will basically open up a browser and then render it, then you get that HTML and then you send that back to the client which is kind of be cumbersome because you're like opening up another browser thing like on the server, rendering it because the thing is in order to do a lot of the stuff you need access to like the window.

And um, but you don't have that on the server.

So that's why you would need to previously to open up like something like Puppeteer which is like, headless Chrome browser.

And so you have to install that run that on your server all these things.

It's a lot of stuff.

Cool.

But now, right, so I have been working.

I am creating a side project, and I am using Astro, which is something I have been looking into real quick.

If Astro is a framework, that helps kind of like ship less JavaScript to the client.

So what I will do is to do with some rendering stuff on its own, like when compiling or whatever, and then, ship the stuff without with, at least with the least amount of JavaScript that's possible.

Right?

And so now you can ship it with JavaScript as well.

You just have to state that you want it to be rendered with JavaScript pretty much that it needs to be interactive.

Otherwise, it's just going to shift the Mel won't be interactive, but they have certain like attributes that you can add on for certain things.

It's kind of cool.

So let me post a link to this blog post because this is has what I am going to talk about.

Now so Astro.

So the way Astro works is that you can use view, react lit and svelte with it.

So, if you want to have some, if you're familiar with any of those you want to have components, like you can build your components using the framework that you like, because I think it has solid JSL.

So yeah, solid support.

So that came out.

Also, what?

What's cool is that you can?

Take your favorite like framework that you like.

Well if it's supported and then Astro has renderers for those.

So if you write something like, I have been running something in spelt, what happens is now you tell it.

Hey, I am using spelt, right?

And so it will use this felt renderer to render the component.

So that is just HTML.

On the when it's shipped down to the client and if you want to have interactivity, then you can ship also that renderer to it so that you can hydrate the application.

So it's interactive now for my use my webcam.

So that's cool.

If you're building, it's about more.

If you have like a web component that you built already that you wanted to use.

So now the thing is with lit.

Just came out with a new version.

Version lit 2.0.

And with that comes some server-side rendering goodness, right?

And so Astro now has support for it and part of that is lit renderer for Astro cool.

Now the thing is the lit renderer for server-side rendering of web components uses the new thing, the declarative Shadow dog.

So let us talk about the declarative Shadow Dom because that's kind of fascinating.

Going to post the link to web dev.

Now, you have to understand my understanding of this is super shallow.

I am going to dive into a more once I get into actually creating a web component where I needed to be server-side rendered, but for right now just kind of like this, some of the things that I found, which I thought was kind of cool and just sort of talking about it here.

You know, is as I understand it.

So yeah, so it's declarative Shadow Dom as I understand it.

So here, shouts to Jason Miller and Mason freed for the article.

I webdev again.

I posted a link to it in the video archive so you can go right to it.

So now they're saying how Shadow Dom is one of the three web component standards.

Yes, so when you're making a, and it's funny because I just like, wrote a blog post for work about it because it helps with the shadowed.

Does it help encapsulate all the stuff that's inside of the web component?

So that things on the surounding application can't really interfere too much like, with things like The Styling or changing functions or anything like that.

Because you want your web component to be like, self-reliant like it just you put it on the page.

It knows what to do.

It's going to do what it does, right?

Cool, so that.

So that's the shadow Dom in a nutshell.

Basically.

Now my blog post, it's coming out is talking about how you can change those Styles if you want.

Like if you know, I mean so you have free rein of how you want to create your web component.

And if you want like the person using it to be able to do things and change things to maybe suit and customized for their own need for their own application.

You can do that as well, which is cool.

So, That to say that now, the shadow Dom.

Okay, provides a way to scope CSS style.

So specific Dom subtree and isolate the subtree from the rest of the document basically a better way of saying when I just said, all right cool then top of the slot element now, so you thing is until now the only way to use Shadow, Dom was to construct a shadow root using JavaScript, but then the thing is that you see here, you need the document dot, get element.

By ID.

So you get it and then you attach a shadow root to it.

And then you put in what you want into that shadow root.

So within your web component, I like to think of it as like your own like little Shadow realm, like your own little pocket, Galaxy or what have you and there you do your business, do what you got to do.

And if you want, you can send out messages and you can receive messages all that stuff.

But the thing is, it's like it's your own little space that you can control right?

Now.

The thing is, to be able to do anything with that space.

Previously, you needed to do it with JavaScript, which meant it had to be done on the client because you can't really do that because you don't have access to the document because there is no document on the server side.

There is no Dom right on the server.

So it goes on to say and it's way better that can say it an imperative API like This works fine for client-side, rendering the same JavaScript modules, that Define our custom elements, also create their Shadow roots and there and set their content, which is what's happening here.

However, many web applications need to render content server side too or to static HTML at build time, right?

So as you're making it a records being requested, you need to have that.

This can be an important step.

Wait.

This can be an important part of delivering a reasonable.

Brilliance to visitors, who may not be capable of running JavaScript because, again, my about section shouldn't need JavaScript to run it.

Just to show the information that's coming from a server, right?

So, So now the justifications for server-side rendering SSR vary from Project to project which again just know your use case and figure out whether or not you want to use this?

Some websites must provide fully functional server rendered HTML in order to meet accessibility guidelines others, choose to deliver a baseline.

No JavaScript experience as a way to guarantee good performance on slow connections or devices.

And that's why I am looking into building a Joe because this next side project is pretty much that's going to be able to run locally.

You won't really need to use the like internet really is, you should be able to run it locally.

And, so I wanted to load as quickly as possible.

And, so I don't like there's Pages where you don't need any JavaScript.

So I am using Astro to be able to, hey, tell it.

Hey, I want JavaScript on this part, but I don't want JavaScript on this thing and it's all in one place, you know I am saying?

So and it handles that for me, which is great.

Cool, so goes on to say that the justifications and then make sure.

Okay.

Yeah, so slow connections are devices.

Now historically, it has been difficult to use.

Shadow.

Dom in combination, with server-side rendering, because there is no built-in way to express, Shadow roots in the server, generated HTML, right?

So on the server was generating it since you don't have a document to attach things, to your kind of difficult to be able to add the shadow.

Root and all these things and then put in the content.

All right?

To do so.

Yes.

So then what so previously like I said, you'd have to maybe run Puppeteer or use the hydrate app from stencil to get that stuff working.

So you can have kind of like a Dom that you can do all those things to get that HTML and then ship it down.

So like it says here there are also performance implications when attaching Shadow roofs the Dom elements that have already been rendered without them.

So it, you know, doing a lot of stuff.

This can cause layoff shifting after the page has been loaded or temporarily show a flash of unstyled, FO.

You see, oh, flash of unstyled content while loading the shadow root style sheets.

Cool.

So that is where the declarative Shadow Dom DSD removes, this limitation bringing Shadow Dom to the server.

So all that stuff, all the things.

The past.

We like, you can't really do this.

Now of declarative Shadow.

Dom.

You can't.

We just kind of amazing?

All right, cool.

So go on say, So building a declarative Shadow root.

So what happens is a declare Shadow, root is a template element with a shadow root attribute.

So now remember like when you're trying to do all this stuff here, see right here.

So notice Shadow root mode open, right?

So you're getting the element.

Then you're attaching the shadow Dom, the shadow root mode open.

So look at that and then you're adding this inner HTML.

Cool.

So now that's imperative.

But now declaratively you can do.

So, here's the host element.

You can be your my awesome components or whatever here.

And see again, the shadow root open.

So we're not using JavaScript to add this part.

We're doing it declaratively.

We're just saying, here you go.

And now it will be understood by the server or what have you or yeah.

When it, when it does, what you gotta do.

All right.

Again, this is my surface level of, just kind of looking over this.

What's going to happen.

So now template element with Shadow root attribute is detected by the HTML parser on the server and immediately applied as a shadow root of its parent element, right?

So same way.

So you see it.

And so now, you see this here, the host element, the declarative part turns into this, which is What's Understood by the browser?

Great.

So now, yeah, and immediately applied as the shadow root of its parent element.

So that's where this time not loading, the pure HTML markup from the above sample, results in the following Dom tree.

So this is what the browser gets.

And so all that kind of awesome goes into more stuff you do.

A lot of things is pretty cool now so this so the good Folks at lit, then took all this knowledge that's here and wrapped it into there.

Their rendering with anything built with like lit, I think they have it to where other things can use it as well.

Don't quote me on that, but I think and so a few months ago, when they announced the beta launch of it, they kind of went over the SSR stuff.

So this is a little bit of the actual presentation.

And so let me just like Kevin chef.

The add this to the list of link so you can check that out.

Later.

Alright, so let us listen to a little bit.

Now.

He's going to show the part.

Let me go back a little bit because he talks about, so it from what's on the server and then some things will look hopefully familiar to you.

What's going on?

Okay.

Well, I am here you go.

And that will get rendered out to the client.

So, that's on the server, right?

What's happening?

And there's gonna get rendered.

So it's gonna show what gets rendered to the client.

So, does this guy does, and then we will see see right here.

Now, since we deeply rendered, these elements that were in the template on the server, will actually string the following HTML to the client.

So this is sort of the fully exploded contents of those elements.

So you see declarative Shadow Dom right there?

We just been talking about that kind of cool.

So that's the stuff that comes out of it.

So on the server lick is doing all that stuff that we just went over from the web dev thing and it's shipping that.

So you notice it says, template Shadow root Open Sea.

Things fit together.

I love when stuff like that.

Just like Quicks for me.

Alright, we're going to say sorry to interrupt you.

Kevin hear you.

And I will pause here for a second and note that lettuces are takes advantage of a new browser feature called declarative Shadow Dom, which is working his way through the standards in his already usable on Chrome.

90 release just last week.

So we're aligning.

Our SS are offering to this new proposal declared of Shadow Dom in a nutshell.

It's a simple new feature added to the browser that adds a shadow, root attribute to the template element.

And then when the browser parses a template Shadow root, it's going to automatically create a shadow root on its parent and immediately move the contents of that template into it.

So using this template Shadow root we have, we can have full Fidelity initial paint using Shadow, Dom for Server render components with no JavaScript whatsoever.

So you saw that, right?

So what happened there, is that so on the server you basically create this, right?

And you ship that down to the browser and now because of the Declarative.

So this is just HTML, right?

So you create it.

So you take your component and whatever you build it in somehow, turn it into this.

And this is what lit is doing for you on the server while it's being rendered.

So it does this take your component and since it's built with lit, it understands how to turn it into this.

So, whatever you're using, make it look similar to this basically, right?

And so then from there that It's shipped to the browser.

And then the browser is like, oh, I understand this because I know this about this thing called the declarative Shadow Dom and then it will take it and then when it's parsing it on the browser, like when it's showing your page, it will go ahead and do what it needs to do.

So that it works and it's just understands just like how my about.

So you notice like my about here.

How did that get up there on the move this down?

So, you notice like when it's rendered on the page, my Dwayne — made you see has a shadow root thing here and then you just has HTML inside and that's what's happening.

So because the browser created this, right?

And so that's what's happening here.

So it gets this and then the browser using the shadow declarative Dom's like, oh, I understand this now and mix it like this.

So just renders properly, and I think that's pretty cool.

I think that's super awesome.

And yeah, that's it.

So I guess I will let him talk a bit more and finish up.

So again, this is pretty cool.

Initial paint using Shadow Dom for Server, rendered components with no JavaScript whatsoever.

And then for browsers that haven't yet the declarative shop Dom future.

There's a tiny polyfill that you can load to turn template Shadow root elements into real Shadow.

Dom similar to the native feature sill without needing to load any custom element definitions and get The same benefits from the server rendering.

Okay.

So with just the server rendered HTML, we can get a full Fidelity initial paint of the content with no JavaScript.

However, just like with any SS, our solution in order to for the patient actually become interactive will immediately.

Eventually need to load JavaScript and if what you're rendering is so then again, so like for my example, I don't need it because like the about is, there is no interactivity is just Isn't presentational like here you go.

Now if you wanted to add some interactivity, so now, what's cool is all this.

It just HTML.

So it loads quickly, and then you can load some JavaScript if you want it to be interactive, and that's what they do here.

So, yeah, so that's where the experimental hydrate support comes from and then your actual component stuff there.

And yeah, so that's it.

And so you can check out the full video, a lot of good stuff.

And yeah, and then they just Recently also just had a whole nother one.

So I their web to their YouTube channel.

See they just announced so that was the Beta release.

But now lit 2.0 is officially announced.

It came out like two weeks ago.

And so all that server-side rendering stuff is in there and yeah, pretty awesome.

So cool.

So yeah, that's where I am at with it that again.

That is as I understand it, declarative Shadow Dom and how I plan on using it.

Let me stop.

I am sharing my screen.

And yeah, so thank you all again for hanging out.

Hopefully it didn't confuse you too much.

I hope.

And that maybe you can see my hope is that you can see how maybe you can use it in your projects and just to let you know that there is such a thing that's out there for you to take advantage of and help you build a quicker website for folks.

Us what I am into as well?

So yeah.

So again, so I am hoping that with the aisle, I am almost sort of kind of almost done with the new side project.

So I want to get that done soon.

And then maybe I will show it on here and kind of show some of the stuff that I built with Astro and things.

So and then, if I need to build anything, I need to do like another web component that I use a lot.

Maybe I will do it in lit, so that A, I can use it in Astro and have it server-side rendered to check that out.

I am not sure.

But what I did was I like about the Dwayne — made.

I just recreated an Astro and it just did it.

It was just pretty quick and easy but there's anything else I probably use like lit or something.

All right, all that to say, I am gonna get you all back to work.

I thought this was pretty cool.

Hopefully you think is cool as well and that you want to go and check it out.

All right.

So let me not try to mess this up.

So, I am taking my time because I would really hate to have to redo all this.

Okay, cool.

I am setting it now.

I am being very, very careful.

All right, so I am going to get you all back to work again.

Thanks for hanging out.

I know there's one more little bit long, but I am going to give even more time for the final work session and yeah, cool.

Hope you are getting what you need done.

Appreciate y'all and yeah, see you later.

Thanks ago.

I almost forgot to create the highlight video.

Oh, that would have been bad.

We have been upset.

All right, cool.

Thank you all share my screen.

Alright, sure my audio.

This here cool.

And now, this is Anthony Cruz AKA butter, which is called.

Thank you.

All right, so much productivity for you and see if 15 minutes after the hour for the next for the final break session and probably go over an artist website or something so you can kind of check it out.

Alright.

Thanks.

Thanks again.

Y'all see you soon easy piece.