all repos — gomponents @ 2e44d495769421423921bfcb06ebfc53f8370dd3

HTML components in pure Go

Add web component elements and slot attribute (#235)

The slot attribute is a standard attribute for use with web components:
https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots
Ken Powers ken@kenpowers.net
Fri, 25 Oct 2024 14:34:35 -0400
commit

2e44d495769421423921bfcb06ebfc53f8370dd3

parent

87bb2f37cb56ea53aafb06d5e264935a49e65bd6

4 files changed, 15 insertions(+), 0 deletions(-)

jump to
M html/attributes.go → html/attributes.go
@@ -133,6 +133,10 @@ func DataAttr(name, v string) g.Node { 	return Data(name, v)
 }
 
+func SlotAttr(v string) g.Node {
+  return g.Attr("slot", v)
+}
+
 func For(v string) g.Node {
 	return g.Attr("for", v)
 }
M html/attributes_test.go → html/attributes_test.go
@@ -84,6 +84,7 @@ {Name: "rel", Func: Rel}, 		{Name: "role", Func: Role},
 		{Name: "rows", Func: Rows},
 		{Name: "rowspan", Func: RowSpan},
+		{Name: "slot", Func: SlotAttr},
 		{Name: "src", Func: Src},
 		{Name: "srcset", Func: SrcSet},
 		{Name: "step", Func: Step},
M html/elements.go → html/elements.go
@@ -264,6 +264,10 @@ func Select(children ...g.Node) g.Node { 	return g.El("select", children...)
 }
 
+func SlotEl(children ...g.Node) g.Node {
+	return g.El("slot", children...)
+}
+
 func Source(children ...g.Node) g.Node {
 	return g.El("source", children...)
 }
@@ -294,6 +298,10 @@ } 
 func Td(children ...g.Node) g.Node {
 	return g.El("td", children...)
+}
+
+func Template(children ...g.Node) g.Node {
+	return g.El("template", children...)
 }
 
 func Textarea(children ...g.Node) g.Node {
M html/elements_test.go → html/elements_test.go
@@ -103,6 +103,7 @@ {Name: "samp", Func: Samp}, 		{Name: "script", Func: Script},
 		{Name: "section", Func: Section},
 		{Name: "select", Func: Select},
+		{Name: "slot", Func: SlotEl},
 		{Name: "small", Func: Small},
 		{Name: "span", Func: Span},
 		{Name: "strong", Func: Strong},
@@ -114,6 +115,7 @@ {Name: "svg", Func: SVG}, 		{Name: "table", Func: Table},
 		{Name: "tbody", Func: TBody},
 		{Name: "td", Func: Td},
+		{Name: "template", Func: Template},
 		{Name: "textarea", Func: Textarea},
 		{Name: "tfoot", Func: TFoot},
 		{Name: "th", Func: Th},