Everything above this is a single planet-summary component. It does no data retrieval but simply renders the data it is passed.

Differences from standard Web Component:

• Without using Webpack, single-file scoped styles are not possible. We have included a classname to enable the styles above (the sans-serif font)
• Passing CSS variables to the component is trivial as the component is rendered in the same DOM.
• We don't need to worry about parsing stringified JSON objects passed as attributes

Mars Venus

View the source for the planet-summary Vue component.