sveltejs / svelte-custom-elements

Turn Svelte components into web components

This project is deprecated — Svelte can compile directly to custom elements as of version 1.37 (see sveltejs/svelte#797 for more info)

---

svelte-custom-elements

Register Svelte components as custom elements.

Installation and usage

First, you need to be familiar with Svelte. Read the guide if you haven't already, then come back here!

Install svelte-custom-elements to your project...

npm install -S svelte-custom-elements

...then use it in your app like so:

import Counter from './Counter.html';
import { register } from 'svelte-custom-elements';

register( 'my-component', Counter, [ 'value' ] );

document.body.innerHTML = '<my-component value="42"></my-component>';

The register function takes three arguments:

1. The tag name you wish to use
2. A Svelte component constructor
3. An optional list of 'observed attributes'. Any properties that you want to get or set (i.e. component.thing = 'foo') must be included in this list.

Demo

Link / Source

License

MIT

svelte-custom-elements's Issues

detachedCallback should be disconnectedCallback

They changed the names after Apple came aboard, detached became disconnected: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements#Custom_element_methods

Browser-specific error?

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!

Archive this repo....

...since it's deprecated

https://help.github.com/articles/archiving-a-github-repository/

Embedded styles do not work?

Great library, but it looks like embedded component styles are not working.
Adding this to Counter.html has no effect on Chrome or Safari:

<style>
  button {
    color: red;
  }
</style>

If it helps, I was using another approach that uses the older(?) document.registerElement(...) and it does pick up the styles

class SvelteElement extends HTMLElement {
...
}

return document.registerElement(tagName, SvelteElement);