feat: support passing an HTMLElement to use as the checkboxland conta…

…iner

This provides more flexibility, which is helpful when integrating with
tools like React's useRef().

docs/demos/icons/demo.js

@@ -144,7 +144,8 @@ let cbl;
 let timeoutId;
 
 function init(existingCbl) {
-  cbl = !!existingCbl ? existingCbl : new Checkboxland({ dimensions });
+  const checkboxlandEl = document.querySelector('#checkboxland');
+  cbl = !!existingCbl ? existingCbl : new Checkboxland({ dimensions, selector: checkboxlandEl });
 
   loop();
 

index.html

@@ -213,15 +213,15 @@ <h2>Setup</h2>
   selector: '#my-container'
 });</code></pre>
 
-      <p>If no options are provided, the following defaults will be used:</p>
+      <p>The Checkboxland class accepts a few possible arguments:</p>
 
       <ul>
-        <li><code>dimensions</code>: <code>'8x8'</code></li>
-        <li><code>selector</code>: <code>'#checkboxland'</code></li>
-        <li><code>fillValue</code>: <code>0</code> (meaning, all boxes are unchecked)</li>
+        <li><code>dimensions</code> (string): A string representing the checkbox grid dimensions in a '{width}x{height}' format. <em>Default: '8x8'.</em></li>
+        <li><code>selector</code> (string | Element): A <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector">selector</a> to the container element where Checkboxland should render the checkbox grid. Or you can pass an <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">HTMLElement</a> directly. <em>Default: '#checkboxland'.</em></li>
+        <li><code>fillValue</code> (number): The type of checkbox you want to pre-populate the grid with. <em>Default: 0 (unchecked).</em></li>
       </ul>
 
-      <p><em>Note: if you really want to load it with a <code>&lt;script&gt;</code> tag, consider using an <a href="https://jakearchibald.com/2017/es-modules-in-browsers/">inline es6 module</a>, as shown below:</em></p>
+      <p><em>Note: if you really want to load Checkboxland with a <code>&lt;script&gt;</code> tag, consider using an <a href="https://jakearchibald.com/2017/es-modules-in-browsers/">inline es6 module</a>, as shown below:</em></p>
 
       <pre><code class="language-markup">&lt;script type=&quot;module&quot;&gt;
   import { Checkboxland } from &apos;https://unpkg.com/checkboxland?module&apos;;

src/checkboxland.js

@@ -2,8 +2,8 @@ export class Checkboxland {
   constructor(props = {}) {
     if (typeof props.fillValue !== 'undefined') _checkForValidValue(props.fillValue);
 
-    this.displayEl = document.querySelector(props.selector || '#checkboxland');
     this.dimensions = _textDimensionsToArray(props.dimensions || '8x8');
+    this.displayEl = _getValidHTMLContainer(props.selector);
 
     // The data object. Don't access this directly. Use methods like getData() and setData() instead.
     // Maybe we can restrict access to this variable in the future, using Proxies. See examples here:
@@ -139,6 +139,18 @@ function _checkForValidMatrix(matrix) {
   throw new Error(`${matrix} is not a valid matrix.`);
 }
 
+function _getValidHTMLContainer(selector = '#checkboxland') {
+  if (selector instanceof Element) {
+    return selector;
+  }
+
+  if (typeof selector === 'string') {
+    return document.querySelector(selector);
+  }
+
+  throw new Error(`Checkboxland selector is invalid.`);
+}
+
 function _textDimensionsToArray(textDimensions) {
   const errorMessage = 'The dimensions you provided are invalid.';