@@ -1,6 +1,8 @@
 package components_test
 
 import (
+	"errors"
+	"io"
 	"os"
 	"testing"
 
@@ -88,3 +90,63 @@ e := g.El("div", Classes{"party-hat": true, "boring-hat": false})
 	_ = e.Render(os.Stdout)
 	// Output: <div class="party-hat"></div>
 }
+
+func hat(children ...g.Node) g.Node {
+	return Div(JoinAttrs("class", g.Group(children), Class("hat")))
+}
+
+func partyHat(children ...g.Node) g.Node {
+	return hat(ID("party-hat"), Class("party"), g.Group(children))
+}
+
+type brokenNode struct {
+	first bool
+}
+
+func (b *brokenNode) Render(io.Writer) error {
+	if !b.first {
+		return nil
+	}
+	b.first = false
+	return errors.New("oh no")
+}
+
+func (b *brokenNode) Type() g.NodeType {
+	return g.AttributeType
+}
+
+func TestJoinAttrs(t *testing.T) {
+	t.Run("joins classes", func(t *testing.T) {
+		n := Div(JoinAttrs("class", Class("party"), ID("hey"), Class("hat")))
+		assert.Equal(t, `<div class="party hat" id="hey"></div>`, n)
+	})
+
+	t.Run("joins classes in groups", func(t *testing.T) {
+		n := partyHat(Span(ID("party-hat-text"), Class("solid"), Class("gold"), g.Text("Yo.")))
+		assert.Equal(t, `<div id="party-hat" class="party hat"><span id="party-hat-text" class="solid" class="gold">Yo.</span></div>`, n)
+	})
+
+	t.Run("does nothing if attribute not found", func(t *testing.T) {
+		n := Div(JoinAttrs("style", Class("party"), ID("hey"), Class("hat")))
+		assert.Equal(t, `<div class="party" id="hey" class="hat"></div>`, n)
+	})
+
+	t.Run("ignores nodes that can't render", func(t *testing.T) {
+		n := Div(JoinAttrs("class", Class("party"), ID("hey"), &brokenNode{first: true}, Class("hat")))
+		assert.Equal(t, `<div class="party hat" id="hey"></div>`, n)
+	})
+}
+
+func myButton(children ...g.Node) g.Node {
+	return Div(JoinAttrs("class", g.Group(children), Class("button")))
+}
+
+func myPrimaryButton(text string) g.Node {
+	return myButton(Class("primary"), g.Text(text))
+}
+
+func ExampleJoinAttrs() {
+	danceButton := myPrimaryButton("Dance")
+	_ = danceButton.Render(os.Stdout)
+	// Output: <div class="primary button">Dance</div>
+}