Sveltejs custom-element with shadow-dom in IE11

This is a project template for a Svelte webcomponent with shadow dom that supports IE11.

To create a new project based on this template using degit:

npm install -g degit # you only need to do this once

degit dschulten/svelte-ce-sd
cd svelte-ce-sd

Note that you will need to have Node.js installed.

Get started

Install the dependencies...

cd svelte-ce-sd
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

IE11

Please note that this project includes the tuespetre/shadow-dom polyfill as a static resource in index.html and transpiles classes to ES5 with Babel. That combination turned out to run with IE11 and uses a real shadow dom in Chrome.

Buble seems to have an issue caused by the way it transpiles class constructors, at least in the default setup.

Deploying to the web

With now

Install now if you haven't already:

npm install -g now

Then, from within your project folder:

now

As an alternative, use the Now desktop client and simply drag the unzipped project folder to the taskbar icon.

With surge

Install surge if you haven't already:

npm install -g surge

Then, from within your project folder:

npm run build
surge public