Stencil and Function UI rendering experiment

stencil-plus-frets.ts

import { Component, Prop } from "@stencil/core";
import { $ as t } from "../../tachyons-styles";
import { $ } from "./app-root-styles";
import { h } from "@stencil/core/dist/renderer/vdom";

@Component({
  tag: "app-root",
  styleUrls: ["app-root.css", "../../tachyons.css"],
  shadow: false
})
export class AppRoot {
  @Prop({
    reflectToAttr: true
  })
  message: string = "hello world";
  render() {
    return $.div.h(
      $.header.headerBar.h(
        t.div.h2.white_50.h("Functional Render Generated from CSS")
      ),
      $.div.message.h(this.message)
    );
  }
}