Extending native HTML elements

[GeorgeTailorZooPlus]

I've created a couple of custom elements in Svelte and it looks really great, but one feature that is missing is that there is no way of extending native HTML elements (eg. link).
One of the use-cases where I want to use these is creating a couple of extended elements, which will have css and some minor JS functionality implemented additionally to the standard ones. I cannot use pure custom elements, as it would be an overkill to integrate them in different frameworks like Vue, React, Angular etc. Not mentioning that it would make the developers to write a lot of boilerplate code just to communicate with custom-elements (getting the value, firing validation and so on).

When trying to build something like the following:

class CustomCbx extends HTMLInputElement {
		constructor() {
			super();
			let shadowRoot = this.attachShadow({mode: 'open'});
			this.addStyles(shadowRoot);
		}
		addStyles(shadowRoot) {
			shadowRoot.innerHTML = `
			<style>
				:host {
					color: red;
				}
				input {
					margin: 20px;
				}
			</style>
			`;
		}
	}
export default CustomCbx;

and running rollup -c, Svelte throws this error: (svelte plugin) ValidationError: Default export must be an object literal;
It would be great if Svelte supported something like this.

[GeorgeTailorZooPlus]

Ok, so after doing some research I've stumbled upon this stackoverflow question:
https://stackoverflow.com/questions/53604958/extending-native-html-element-in-angular-6
Even though it's about Angular, the same thing applies to Svelte.
What I had to do is to define my component inside oncreate hook:

oncreate() {
	    customElements.define("my-button", class extends HTMLButtonElement {
             ...
             }, { extends: 'button' });
             this.refs.box.innerHTML = '<button is="my-box"></button>';
}

and then tell the browser to render new instance of this extended custom element with this.refs.box.innerHTML = '<button is="my-box"></button>';.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been closed as it was previously marked as stale and saw no subsequent activity.