Benchmark?

[Paweł Kowalski]

Hey, i was just wondering - is it faster than the original youtube-lite-embed?
If so, is it observable in some synthetic benchmarks?

Ive seen some screenshots from chrome performance tab in Paul Irish repo, and question popped up - why use shadow dom version instead of the customelement? Was it just an excercise, or there are some real benefits?

[Justin Ribeiro]

is it faster than the original youtube-lite-embed

Not in my traces. Same speed profile. That said.....

why use shadow dom version instead of the customelement? Was it just an excercise, or there are some real benefits?

Keep in mind, this version offers a different set of features other than just the fact it uses shadow dom (which gives you the benefit of isolation and encapsulation), particularly with the Intersection Observer option and other bits. So you can use it in ways that will give you other performance/ux benefits depending on the context of your implementation.

This is one reason Google uses this component on Web.Dev and why it's still a recommended facade load along side Paul's re: https://web.dev/third-party-facades/ Which is to say, either one will work just fine, base your use on what you're trying to accomplish. You and users will be better off regardless and we will all sleep better knowing the web perf has improved somewhere. :-)

The longer story is more fun. Paul and I go way back (he's a cool cat) and I had been making contributions to lighthouse and doing crazy things (which Paul was heavily involved in too), so I had seen him drop the CE on GH and decided to riff on it because it was a Friday and people were still sort of on the fence about the whole CE-web-components-api things. We (Danny, Leon, Erik, Amal) had debated shadow a lot on the podcast in respect to web components—which was always in the learning spirit and always good fun—so it seemed like a natural extension to dispel the popular notion at the time that shadow was indeed slow (which it wasn't, and isn't).

[Paweł Kowalski]

And here I am thinking I've read everything from Paul about performance :)

Thanks for the history lesson and a link :)

I think shadow dom got the reputation it has because of React and its whole page diffing, rendering everything twice, etc. For a lot of people Shadow DOM became synonymous with React. Web is going forward so fast its hard to keep up :)