feat(button): allow adding the HTMLButton element to a container

src/button.js

@@ -13,6 +13,7 @@ import { srOnlyStyle, focusParams, noop, addToDom } from './utils.js';
  * @param {Boolean} [properties.disabled] - Whether the button is disabled when created.
  * @param {Number} [properties.padX=0] - The horizontal padding.
  * @param {Number} [properties.padY=0] - The vertical padding.
+ * @param {HTMLElement} [properties.container] - The HTMLElement that the HTMLButtonElement will be appended to.
  * @param {Function} [properties.onEnable] - Function called when the button is enabled.
  * @param {Function} [properties.onDisable] - Function called when the button is disabled.
  * @param {Function} [properties.onFocus] - Function called when the button is focused by the keyboard.
@@ -40,6 +41,7 @@ class Button extends SpriteClass {
 
     text,
     disabled = false,
+    container,
     onDown,
     onUp,
     ...props
@@ -94,7 +96,7 @@ class Button extends SpriteClass {
     button.addEventListener('keydown', evt => this._kd(evt));
     button.addEventListener('keyup', evt => this._ku(evt));
 
-    addToDom(button, this.context.canvas);
+    addToDom(button, container ?? this.context.canvas);
 
     this._uw();
     this._p();

src/utils.js

@@ -24,8 +24,10 @@ export function addToDom(node, canvas) {
         ...container.querySelectorAll(':scope > [data-kontra]')
       ].pop() || canvas;
     target.after(node);
-  } else {
+  } else if (canvas.nodeName == 'CANVAS') {
     document.body.append(node);
+  } else {
+    canvas.append(node);
   }
 }
 

test/unit/button.spec.js

@@ -136,6 +136,21 @@ describe('button', () => {
       expect(button.context.canvas.nextSibling).to.equal(button._dn);
     });
 
+    it('should add the node to a container', () => {
+      const container = document.createElement('div');
+      button.destroy();
+      button = Button({
+        width: 150,
+        text: {
+          text: 'Hello',
+          width: 100
+        },
+        container
+      });
+
+      expect(container.contains(button.node)).to.be.true;
+    });
+
     it('should hide the DOM node', () => {
       let styles = srOnlyStyle
         .split(';')