If you have worked with JavaScript over the years, chances are high you have used some kind of component system before to define how a larger piece of content renders in HTML and how it can be interacted with.
Popular frameworks such as React and Vue both rely on such concepts. Unfortunately frameworks have typically invented their own mechanisms for that purpose, which work in different ways.
Web Components is a set of features that introduces similar mechanisms natively to the browser. Having a standardised layer for these so-called leaf components can aid interoperability between different paradigms significantly – imagine a future where you can just reuse a leaf component you wrote for a simple native JavaScript application in a React application, or vice-versa.
In this session we will learn how the different features that Web Components encompass work. We will also dive into how they can be used by example, taking a look under the hood of the AMP framework which relies on them and diving into their usage within Gutenberg.