Svelte component transpiled with buble not supported by shadow-dom polyfill

[dschulten]

When I transpile my svelte component with buble to run it in IE11, the following will be generated:

function App(options) {
		if ( options === void 0 ) options = {};

		HTMLElement.call(this);
		init(this, options);
		this._state = assign({}, options.data);

		this.attachShadow({ mode: 'open' });

		this._fragment = create_main_fragment(this._state, this);

		this._fragment.c();
		this._fragment.m(this.shadowRoot, null);

		if (options.target) { this._mount(options.target, options.anchor || null); }
	}

The component runs with real shadow-dom in Chrome and polyfilled in IE11 (no style isolation, of course) using the shadow-dom polyfill when I change the Svelte compiler output above to the following, where I use the HTMLElement.call(this) return value:

function App(options) {
		if ( options === void 0 ) options = {};

		var self=HTMLElement.call(this);
		init(self, options);
		self._state = assign({}, options.data);

		self.attachShadow({ mode: 'open' });

		self._fragment = create_main_fragment(self._state, self);

		self._fragment.c();
		self._fragment.m(self.shadowRoot, null);

		if (options.target) { this._mount(options.target, options.anchor || null); }
		return self;
	}

See also tuespetre/shadow-dom#7

Can we adjust the Svelte custom-component compiler so that it uses the return value of HTMLElement.call() as shown above?

The shadow-dom polyfill by @tuespetre also comes with a shim that allows to run the ES5 transpiled code in Chrome, where there is native shadow-dom support. I.e. people can either choose to transpile classes and use the polyfill or not transpile classes and work with modern browsers only.

[dschulten]

This seems to be a buble issue. With babel it works both in IE11 (tuespetre/shadow-dom polyfill), with real shadow dom in Chrome. See https://github.com/dschulten/svelte-ce-sd