Web Components An Introduction to the Future - Tobias Ljungstrom

With Web Components having reached high enough browser support to be production ready, it is high time to take a look at what they are and what they can do for you. In this talk you will learn how to create a web component using the native browser api:s. You will learn about the advantages of the technology, how it affects developers, designers, and end-users. You will also see how easy it is to integrate it with existing frontend frameworks.

Check out more of our featured speakers and talks at

I am currently changing all my libraries to components but were the video I saw about components as clear and didactic as this one, I would never have code otherwise

[marcellerusu]

I think what most people are missing is that these are _low level_ apis.

They are shockingly powerful, but we should & will have frameworks that take care of the boilerplate, add type checking etc.

What is great to me is that we can finally use regular attributes, regular events, etc. This means that the html markup actually starts to reflect what our application is doing AND makes testing so much easier since we just rendering a custom component, using regular dom APIs to fire & listen to events.

Our frameworks aren't all ready yet, but getting our application logic closer & closer to the real native web apis is always a good thing.

[ПетърТодоров-оф]

Great job on explaining such a complicated topic in just 40 minutes! I finally understand how web components work.

[flemminghansen]

Great video, I really liked it.

I think the biggest problem with Web Components is the people think it's hard, because you have to think in a different way. It's easier to wrap your head around the abstractions we see in JSX and template-based frameworks. However, I think the problem with a lot of frameworks, is that they let you do dumb thing, because you don't have to really think about things like data structure. For instance, we often see prop mining or too many contexts in React, not to mention that 9/10 bugs are because of some hidden dependency you forgot to add to your hooks. And where in the chain of components did the error occur?

The thing that was holding me back with Web Components, was the ability to handle a complex data-structure - Where I would definitely not dare to rely on custom events and element attributes to update the DOM.But it can be done, if you bind the Web Components to an observable service(s) that handles when it updates. But it still have its caveats, and requires a bit of overhead. But the data will be isolated to that service, and not floating around in components as we see in React.

Still, Web Components are really hard to sell because frameworks are easier to use.

[StevieFQ]

You guys REALLY need to fix that layout. In this case the slides take up only 40% of the viewable area (and I'm definitely being generous here).
Small actual pixel count, add some compression to the mix and you get something of worse quality then tutorials made in the early 90s

I had a bad time trying to bind the "onchange" property with my component dispatching an "onchange" event (Programming can make you feel quite powerful but NS (Natural Stupidity) always level things up)

[WorstDeveloper]

Who on earth thought it would be a good idea to type html and css as strings?
Were they high when they created web components?

[deidran]

The web is always backwards compatible.

[miklosnemeth]

Far the biggest enemy to web component popularity is React. React has better TypeScript integration for props. In web components there is no way to declare the “props” interface, in React you can. A hell lot of developers are in love with hooks, web components paradigm is completely class based, I love it, but hard core hook fanatics will never give up on hooks.

[Dylan_thebrand_slayer_Mulveiny]

Future here. Web components still suck ass.

[babakfp]

I don't understand why they are trying to sell us Web Components. Web Components more like 💩 components.