Some Background:
I’ve been working with web components a lot the past year. Mostly meeting and talking about specs, new components, best practices with a bunch of developers at work. I had a feeling that the concept seemed really familiar to me, but it was hard to put something to it, until I was asked a random question from a friend: Which is your favorite power ranger series?
I was a little taken back at this question because there was no related context in the convo we were having. But it was almost like that question was a key that unlocked this mystical box from my childhood and then it all started flooding back to me. We talked for an hour or more about the different series, what we remember and then something else hit me.
One of my big tech passion projects I help contribute to is HAX, the Headless Authoring eXperience made out of web components. Everyone makes the comparison that Web Components are like legos. While I do agree, I think we can do one better. Web Components are Super Sentai. The end. Thanks for coming to my TED Talk.
Wait, pause. What is a “Super Sentai”?
Super Sentai is a superhero genre or metaseries that come from the combination of 2 words:
Super (/ ˈsü-pər /):
- High Grade or quality or
- large or powerful
Sentai(戦隊): Japanese for squadron, taskforce
The term might not be familiar to you, but you have seen its shows. Power Rangers or Sailor Moon ring a bell? Well for this imma stick with Power Ranger examples, but the ideas can also translate to Sailor Moon as well.
The reason why I dont like the lego comparison is because you can't do anything with a single lego brick, you need a bunch of them. A single Power Ranger is bad-ass and can handle their own.
Like a web component, there are key aspects that help define what a Power Ranger is.
HTML Template and Custom Elements:
These two are intertwined, so I'll talk about them in the same section. allows us to store some markup and styling of the component, that we can later clone, reuse, etc. You gotta use slots to make a placeholder since elements render in the shadow root. This would be akin to morphers and the morphing grid. Do power Rangers just walk down the street and buy groceries (when we were allowed to do that)? No. They are people who morph into rangers when the time occurs. But what good is a morpher if you don't have a power ranger who can use it. That’s where Custom Elements come in.
We can make a power rangers class and use a connectedCallback to connect it to our shadow to the template and figure out how we define our behaviors. This is where we get into custom elements. Each Power Ranger has behaviors, Attributes and functions specific to that ranger. We can make a custom element and give the ranger whatever color, weapon, and zord we want to assign. Think back to when Tommy Oliver lost his Green Ranger Powers. Zordon and Alpha used the Power Ranges template and created a new Custom Element (New Ranger) with unique properties specifically to it. This is how we got the White Ranger! Our element comes with Saba, The White Tiger Zord, and the White Tiger MegaZord
Just like Rangers needing a morpher and the morphing grid, we need HTML Templates (and slots) to make our Custom Elements.
The Shadow DOM:
Each element is encapsulated and rendered separately from the main DOM. This way you can keep features and styling of each element independent of each other and the other parts of the DOM. This is like the power ranger theme or color. There are only one of each color ranger in a team. (No Time Force did not have 2 red rangers. One was the Red Ranger, the other was the Quantum Ranger… and Ninja Storm had the Red and Crimson Ranger. Totally different).
As you can see, the <red-ranger> and <crimson-rangers> are similar, but independent of each other, all thanks to the Shadow DOM.
Thanks to all the parts of the spec: HTML Template, Custom Elements, and Shadow DOM we get our own badass <power-ranger>!
IT'S GIT INIT TIME
But the cool thing about web components is when you combine them!!
Like every Super Sentai series, the support and skills of the group are what defeats the villain at the end of the episode. Web Components are better when they work together. Hey sometimes power rangers from different series make guest appearances to help each other out.
I hope after this you see why I believe Web Components and Power Rangers are a much better comparison.
Go Forth and Build. Stay Spicy and Keep Moving