Draft: add attribute control for components + docs

src/content/guide/05-layout-component-props.md

@@ -6,6 +6,7 @@ All layout components accept the following props:
 
 * [zIndex](guide#zindex-1) `Number|String`
 * [pointerEvents](guide#pointerevents-1) `Boolean`
+* [attrs](guide#attrs-1)
 
 The Svg and ScaledSvg layout components also accept:
 
@@ -86,6 +87,18 @@ Useful for tooltip layers that need to be display above chart elements but not c
 </LayerCake>
 ```
 
+### attrs `Object|null`
+
+This allows you to add attributes onto the main container of any of the layout components
+(i.e. the `<svg>` tag for `Svg` and `ScaledSvg`; the `<canvas>` tag for `Webgl` and `Canvas`; and the `<div>` tag for `Html`). 
+
+```svelte
+<LayerCake ...>
+  <Svg attrs={{role: "img", title: "A graphic description"}}>
+  </Svg>
+</LayerCake>
+```
+
 ### viewBox `String`
 
 On Svg components, this defaults to `undefined` and `0 0 100 100` for ScaledSvg.

src/lib/layouts/Canvas.svelte

@@ -5,7 +5,9 @@
 <script>
 	import { getContext, onMount, setContext } from 'svelte';
 	import { writable } from 'svelte/store';
+
 	import scaleCanvas from '../lib/scaleCanvas.js';
+	import setElementAttributes from '../utils/setElementAttributes.js';
 
 	/** @type {HTMLCanvasElement} [element] The `<canvas>` tag. Useful for bindings. */
 	export let element = undefined;
@@ -19,6 +21,13 @@
 	/** @type {Boolean} [pointerEvents] Set this to `false` to set `pointer-events: none;` on the entire layer. */
 	export let pointerEvents = undefined;
 
+	/** @type {Object} [attrs] An object of key-value pairs that sets additional attribute values onto the `<canvas>` tag for each key */
+		export let attrs = null;
+
+	$: if (element && attrs ) {
+		setElementAttributes(element, attrs);
+	}
+
 	const { width, height, padding } = getContext('LayerCake');
 
 	const cntxt = {

src/lib/layouts/Html.svelte

@@ -5,6 +5,8 @@
 <script>
 	import { getContext } from 'svelte';
 
+	import setElementAttributes from '../utils/setElementAttributes.js';
+
 	/** @type {Element} [element] The layer's outermost `<div>` tag. Useful for bindings. */
 	export let element = undefined;
 
@@ -14,6 +16,13 @@
 	/** @type {Boolean} [pointerEvents] Set this to `false` to set `pointer-events: none;` on the entire layer. */
 	export let pointerEvents = undefined;
 
+	/** @type {Object} [attrs] An object of key-value pairs that sets additional attribute values onto the outer `<div>` tag for each key */
+		export let attrs = null;
+
+	$: if (element && attrs) {
+		setElementAttributes(element, attrs);
+	}
+
 	const { padding } = getContext('LayerCake');
 </script>
 

src/lib/layouts/ScaledSvg.svelte

@@ -5,6 +5,8 @@
 <script>
 	import { getContext } from 'svelte';
 
+	import setElementAttributes from '../utils/setElementAttributes.js';
+
 	/** @type {Element} [element] The layer's `<svg>` tag. Useful for bindings. */
 	export let element = undefined;
 
@@ -20,6 +22,13 @@
 	/** @type {String} [viewBox=`0 0 100 ${100 / fixedAspectRatio}`] A string passed to the viewBox property on the `<svg>` tag. */
 	export let viewBox = `0 0 100 ${100 / fixedAspectRatio}`;
 
+	/** @type {Object} [attrs] An object of key-value pairs that sets additional attribute values onto the `<svg>` tag for each key */
+		export let attrs = null;
+
+	$: if (element && attrs) {
+		setElementAttributes(element, attrs);
+	}
+
 	const { padding } = getContext('LayerCake');
 </script>
 

src/lib/layouts/Svg.svelte

@@ -5,6 +5,8 @@
 <script>
 	import { getContext } from 'svelte';
 
+	import setElementAttributes from '../utils/setElementAttributes.js';
+
 	/** @type {Element} [element] The layer's `<svg>` tag. Useful for bindings. */
 	export let element = undefined;
 
@@ -20,6 +22,13 @@
 	/** @type {String} [viewBox] A string passed to the viewBox property on the `<svg>` tag. */
 	export let viewBox = undefined;
 
+	/** @type {Object} [attrs] An object of key-value pairs that sets additional attribute values onto the `<svg>` tag for each key */
+		export let attrs = null;
+
+	$: if (element && attrs) {
+		setElementAttributes(element, attrs);
+	}
+
 	const { containerWidth, containerHeight, padding } = getContext('LayerCake');
 </script>
 <svg

src/lib/layouts/Webgl.svelte

@@ -6,6 +6,8 @@
 	import { getContext, onMount, setContext } from 'svelte';
 	import { writable } from 'svelte/store';
 
+	import setElementAttributes from '../utils/setElementAttributes.js';
+
 	/** @type {HTMLCanvasElement} [element] The `<canvas>` tag. Useful for bindings. */
 	export let element = undefined;
 
@@ -21,6 +23,13 @@
 	/** @type {WebGLRenderingContext} [context] The `<canvas>`'s WebGL context. Useful for bindings. */
 	export let context = undefined;
 
+	/** @type {Object} [attrs] An object of key-value pairs that sets additional attribute values onto the `<canvas>` tag for each key*/
+		export let attrs = null;
+
+	$: if (element && attrs) {
+		setElementAttributes(element, attrs);
+	}
+
 	let testGl;
 
 	const { padding } = getContext('LayerCake');

src/lib/utils/setElementAttributes.js

@@ -0,0 +1,17 @@
+/* --------------------------------------------
+ * Set attributes on an element
+ */
+export default function setElementAttributes(element, attrs) {
+	if (typeof attrs === 'object' && !Array.isArray(attrs) && attrs !== null) {
+		const attrKeys = Object.keys(attrs);
+		for (let i = 0; i < attrKeys.length; i++) {
+			const attr = attrKeys[i];
+			const property = attrs[attr];
+			if (element.getAttribute(attr) !== property) {
+				element.setAttribute(attr, property);
+			}
+		}
+	} else {
+		console.warn('[LayerCake] `attrs` property must be an object. You passed in:', attrs);
+	}
+}