Web Components

Introduced by Alex Rusell at the Fronteers Conference in 2011, Web Components have since gained traction among web developers to create encapsulated and reusable elements for the web.

They look like that:

<my-component name="Dennis"/>

As you can see, it's not much different than your standard HTML elements like a div or li. Since web components are built with Javascript, they are executed on the client-side, so when visited in a browser. A custom component could be programmed in any way, depending on its purpose.

For example, the goal could be to create a card component that displays the 'name' attribute in an h1 tag wrapped in a div once executed:

<my-card name="Dennis"> <div class="card-wrap"> <h1 class="card-title">Dennis</h1> </div> </my-card>

Components behave like standard HTML elements, so you can target them by using CSS:

my-card { background: white; padding: 1em; border-radius: 0.125em; }

That's it, for the most part. Let's dive deeper into how spx is utilizing the power of web components.