go-app
go-app copied to clipboard
maxence-charriere
Custom HTML elements
Have there been any discussions around custom HTML elements? I would like to build HTML with app but need some custom tags.
Maybe this: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements.
What a custom element would do compared to a component? Any example on how would you like to use it?
I specifically need to create an element that is predetermined by a third-party (hotwire.dev) requires (turbo-frame, turbo-stream, etc.).
Something like:
ui := app.Html().Body(
app.Head().Body(
app.Title().Body(app.Text("example")),
app.Meta().Name("viewport").Content("width=device-width,initial-scale=1"),
app.Link().Rel("stylesheet").Href("main.css"),
app.Script().Src("main.ts"),
),
app.Body().Body(
app.Div().Class("app").Body(
app.Header(),
app.Nav(),
app.Main().Body(
app.Custom("turbo-frame").Body( // <-- HERE
app.Div().Class("flex flex-col h-screen max-w-7xl mx-auto px-4 sm:px-6 md:px-8"),
),
),
app.Aside(),
app.Footer(),
),
),
)
EDIT: This also probably makes more sense knowing that I intend on rendering the HTML built with the above with PrintHTMLWithIndent and the HTML must have the custom tag names in it.
Like so:
<html>
<head>
...
</head>
<body>
<div class="app">
<header></header>
<nav>
</nav>
<main>
<turbo-frame> <!-- HERE -->
<div> class="flex flex-col h-screen max-w-7xl mx-auto px-4 sm:px-6 md:px-8"></div>
</turbo-frame>
</main>
<aside></aside>
<footer></footer>
</div>
</body>
</html>
Looks a bit complicated to implement in the package since it involves multiple js calls. Right now I have other priorities but in the meantime, maybe using a Raw() element could solve your problem.
Looks a bit complicated to implement in the package since it involves multiple js calls. Right now I have other priorities but in the meantime, maybe using a Raw() element could solve your problem.
Understandable. Thanks for the quick responses. Really love what you are doing with this project BTW!
I would also be very interested in this, especially since a web-components version of material design is in progress: https://github.com/material-components/material-components-web-components
I was about to work on this and stumbled upon HTMLElem and ElemSelfClosing. It should be able to handle custom HTML elements and web components.
