Issue when constructing kicanvas-source with document.createElement

[tjhorner]

Describe the bug

When creating a kicanvas-source element programmatically with document.createElement, the browser gets very upset with the following error (or similar):

• Chrome: Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes
• Safari: NotSupportedError: A newly constructed custom element must not have attributes
• Firefox: Uncaught DOMException: Operation is not supported

This behavior can occur when creating kicanvas-sources directly, of course, but it can also occur as a side effect of being in an environment like React, which does the same when building custom elements inside of React components.

To Reproduce

Here is a minimal POC; you can paste it into the JS console of any page with KiCanvas loaded:

const kcSource = document.createElement("kicanvas-source")

It will result in an error in the console.

Expected behavior

The kicanvas-source element should be created dynamically without an error.

Screenshots

Environment

• OS: macOS
• OS version: 14.0 (23A344)
• Browser: Chrome / Firefox / Safari
• Chrome version: 120.0.6099.199
• Firefox version: 121.0.1
• Safari version: 17.0 (19616.1.27.211.1)

Additional context

I believe the issue is being caused around here:

kicanvas/src/kicanvas/elements/kicanvas-embed.ts

Lines 174 to 179 in 5c38d14

	constructor() {
	super();
	this.ariaHidden = "true";
	this.hidden = true;
	this.style.display = "none";
	}

...or maybe by this decorator:

kicanvas/src/kicanvas/elements/kicanvas-embed.ts

Lines 181 to 182 in 5c38d14

	@attribute({ type: String })
	src: string | null;

The browser apparently does not like custom elements manipulating the DOM in their constructor, since it's technically against the spec.

[theacodes]

Looks like we probably just need to move those constructor bits into connectedCallback(). Feel free to send a PR if you'd like, otherwise, I'll get it when I have a chance to sit down with this project again.