Browser-specific error?

[gloparco]

First, off I will declare the standard disclaimer - that I am new to Svelte, so this could very well be an error due to the way I am implementing.

I successfully installed svelte-custom-elements and added your example element to the svelte example code that I had downloaded prior (the one with the list, the counter, and the hello world). Anyway, when I add the new component, everything compiles cleanly, and it works in Chrome, but in Safari and Firefox on the Mac, I get:

ReferenceError: Can't find variable: customElements

This happens, of course, because customElements is undefined when this line is executed:

customElements.define( tagName, SvelteElement );

I am guessing this is my error, but am posting just in case... The main.js file is simply:

import CatList from './js/CatList'; import Counter from './js/Counter'; import HelloWorld from './js/HelloWorld'; import GeneCounter from './components/MyCounter.html'; import { register } from '../../node_modules/svelte-custom-elements/dist/svelte-custom-elements.es';

register('my-counter', MyCounter, ['value']);

Like I said, it compiles, but there is a runtime error.

By the way, thanks for all your hard work!

[Rich-Harris]

This library just wraps Svelte components in some boilerplate to register a custom element — it doesn't polyfill the environment if custom elements aren't supported. You could try adding https://github.com/webcomponents/custom-elements to your project to see if it allows it to work in older browsers?

[gloparco]

You are correct - I had erroneously thought that all green browsers already supported custom elements and templates, but that HTML imports were a sticking point. However, I was too optimistic... only Chrome currently supports custom elements, although Safari has it in the soon to be released 10.1. Firefox has it on their radar, but that's it.

For others who are interested:

http://jonrimmer.github.io/are-we-componentized-yet

Whatever the case, a polyfill is probably recommended for some time.

[vortizhe]

What is the best way to add the polyfill with webpack svelte loader?

[Rich-Harris]

In your entry module, I would add an import statement at the very top, something like this:

import 'custom-elements/dist/CustomElements.min.js';
import 'custom-elements/dist/MutationObserver.min.js';
import { register } from 'svelte-custom-elements';
import Counter from './Counter.html';

I haven't actually tried this, but it should work... alternatively, you could just include CustomElements.min.js and MutationObserver.min.js on your page as <script> tags.