I've been doing a lot of work in Vue recently so when I was asked to evaluate using Web Components on an upcoming project, I approached it with a Vue-ish mindset.
I've not really kept my eye on Web Components for the last couple of years beyond seeing original proposals being superceded and import specs being replaced. Just seeing those things on the periphery were enough to make me think "Meh... I'll have a look later when it's all died down".
Now, I know that Web Components !== Vue. But, I was interested in what knowledge could be migrated from one technology to the other. If I were building an actual web app, I'd definitely use Vue. Building a boxful of reusable, shareable UI elements, though... let's find out.
I'm not going to build anything too complex to start with. How about an "Planet Summary" panel? A simple panel that renders summary information about a planet given a JSON object.
I have an API that returns JSON information about where in the sky to find planets when given your latitude and longitude. For example, if you're standing slightly south of the centre of Berlin and want to know where Venus is, you'd make this request:
https://planets-api.awsm.st/venus/52.5/13.4
And the response would be:
{
"name": "Venus",
"number": 1,
"colour": 1,
"colleft": 24,
"colright": 25,
"alt": 13.043427032890424,
"az": 290.3495756869397,
"dec": 22.661411404345362,
"ra": 110.21545618074397,
"H": 98.18491228623316,
"eclon": 108.59563862950628,
"eclat": 0.5200939814134588,
"illum": 0.9918628383385676,
"r": 0.7192422869900328,
"dist": 1.7155717469739922,
"mag": -3.909377586961354,
"elong": 0,
"pa": 0,
"p": 1,
"description": {
"altitude": "Barely above the horizon",
"azimuth": "West"
},
"visible": false
}
In this case, it determines Venus isn't visible because, even though it's above the horizon, it's not bright enough given the time of day (about 6pm).
We want to make a little UI card that displays this information.
Mapping Vue features to Web Components
| Vue | Web Component | Notes |
|---|---|---|
| name | class name | |
| data | instance properties | |
| props | attributes | these are not reactive by default. Attributes have to be specifically observed (see watch). |
| watch | attributeChangedCallback | first, register your watched attributes with `observedAttributes` then process them in attributeChangedCallback |
| computed | getters | |
| methods | class methods | |
| mounted | connectedCallback | called async so the component may not be fully ready or may have been detached. Use Node.isConnected to protect against calling a dead node |
| componentWillUnmount | disconnectedCallback | |
| style block | style block inside template | styles are scoped by default |
| template block | literal template | JS literal templates (backtick strings) are nowhere near as powerful for templating as an actual template library. Vue template features such as `v-for` can be replicated with vanilla JS but a single-purpose template library (such as `lit-html`) is a good idea. |
NOTE: I am deliberately not using Webpack. I realise that actual applications would be using additional tooling but I want to see what we can do without it.
The first thing that clicked with me was when I realised that computed properties and getters are identical. Nice.
Here's Vue code to return the planet name or a default string:
computed: {
name() {
return this.planet.name || '';
},
}
And Web Component:
get name() {
return this.planet.name || '';
}
Well, that was easy (and trivial).
The same goes for defining the custom element for use in the DOM
Vue:
components: {
"planet-summary": PlanetSummary
}
Web Components:
customElements.define("planet-summary", PlanetSummary);
The only real difference at this level is the data binding. In Vue, props passed from a parent element to a child are automatically updated. If you change the data passed in, the child updates by default. With Web Components, you need to explicitly say you want to be notified of changes.
This is basically the same as setting a watch in Vue. Data that changes in a slightly less tightly-bound fashion can be watched and the changes trigger updates further down.
Watches
Watches in Vue:
watch: {
altitude(newValue, oldValue) {
...
}
}
With Web Components, registering a watch and reacting to changes are separate:
static get observedAttributes() {
return ['altitude'];
}
attributeChangedCallback(name, oldValue, newValue) {
if(name === 'altitude') {
...
}
}
Templating
Vue contains full templating support – for loops, conditional rendering, seamless passing around of data. Natively, you have literal templates and that's about it.
To create a list of planets, you'd use the v-for directive and loop over your planets array.
Vue:
<ul>
<li v-for="planet in planets">
<planet-summary :planet="planet"></planet-summary>
</li>
</ul>
Web Component
<ul>
${this.planets.map(planet => `
<li>
<planet-summary planet='${JSON.stringify(planet)}'></planet-summary>
</li>
`).join('')}
</ul>
The join is there because we're creating an HTML string out of an array of list items. You could also accomplish this with a reduce.
Boilerplate
With Web Components, your component lives in the Shadow DOM so you are responsible for updating it yourself. Vue handles DOM updates for you.
Here is a basic render setup:
constructor() {
super();
this._shadowRoot = this.attachShadow({ mode: "open" });
this.render();
}
render() {
this._shadowRoot.innerHTML = '';
this._shadowRoot.appendChild(this.template().content.cloneNode(true));
}
This needs to be explicitly included in every component as they are standalone whereas Vue automatically handles DOM updates.
CSS
Due to the fact that Web Components live in a separate document fragment, There are complications around sharing styles between the host page and the component which are nicely explained on CSS Tricks. The biggest benefit, on the other hand, is that all styles are scoped by default.
Vue without Webpack (or other tooling) also has its own complications around styles (specifically scoping styles) but if you're building a Vue application, it is much more straightforward to specify which styles are global and which are scoped.
Summary
Here is the Vue Planet Summary and the source of planet-summary-vue.js.
Here is the Web Component Planet Summary and the source of planet-summary.js.
Bonus: here's a Planet List Web Component which includes the Planet Summary component. And the source of planet-list.js
All in all, pretty much everything between basic Vue Components and Web Components can be mapped one-to-one. The differences are all the stuff around the basic construction of the components.
I'd say that if you're looking to build completely standalone, framework-free reusable components, you'll be able to accomplish it with the Web Components standard. You just might have a bit of extra lifting and boilerplate to deal with.
On the other hand, if you're already planning on building a full web application with data management and reactive components, use the tools available to you.
