General

Motivation

Spx was made to create a coherent element library for busy WordPress developers. With new major page builders being released almost yearly, there are hardly any constants when adapting to the ecosystem of a new builder, leaving countless add-ons and plugins useless when switching tools. As you might have already guessed, spx is here to combat that churn by delivering a single element library using Web Components that is able to work within current and future page builders.

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.