search

SparkPost / heml

HEML is an open source markup language for building responsive email.
https://heml.io
MIT License
4.33k stars 157 forks source link

Plain HTML via Custom Elements with static renderer #19

Open jamiebuilds opened 6 years ago

jamiebuilds commented 6 years ago

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

treshugart commented 6 years ago

This is actually an interesting thought-experiment. The tooling I current know of to "SSR" custom elements and shadow DOM are:

Of course, I'm partial to the first, but your mileage will vary with both solutions. I'm here if you have any questions!

avigoldman commented 6 years ago

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?

jamiebuilds commented 6 years ago

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>
cossssmin commented 6 years ago

Correct me if I'm wrong, but I think @avigoldman is talking about the inlined CSS, @thejameskyle.

avigoldman commented 6 years ago

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.