SparkPost
Plain HTML via Custom Elements with static renderer
Instead of creating a new language, what if you changed to HTML with custom elements (web components), and rendered them out into static HTML.
cc @treshugart I'm sure you've built something that does this by now
This is actually an interesting thought-experiment. The tooling I current know of to "SSR" custom elements and shadow DOM are:
- https://github.com/skatejs/ssr
- https://github.com/GoogleChrome/rendertron
Of course, I'm partial to the first, but your mileage will vary with both solutions. I'm here if you have any questions!
I did do a little research on this at the start. I thought it would provide a much nicer dev experience if the dev tools showed the elements as...well elements. I didn't see any good ways to handle the CSS that would style elements. Is there something I'm missing?
Well custom elements do look just like any other element:
<html>
<head>
<heml-subject>Welcome to HEML!</heml-subject>
<heml-style>
body { background: SkyBlue; }
h1 { color: DarkViolet; }
</heml-style>
</head>
<body>
<heml-container>
<heml-marquee><h1>Explore the world of email! 💌</h1></heml-marquee>
</heml-container>
</body>
</html>
Correct me if I'm wrong, but I think @avigoldman is talking about the inlined CSS, @thejameskyle.
More about how the styling works for custom components. For example:
/* given css */
body {
background: SkyBlue;
}
/* output css */
.body {
background-color: #87CEEB;
}
.body .bodyTable {
background-color: #87CEEB;
}
My thought was I wanted over override a lot of the default HTML elements and CSS functionality so with that I found it was easier to control the entire process from start to finish rather than fighting with the custom elements spec.
It's completely possible I misunderstood the limitations and that custom elements is the better route.