compile to custom element

[Rich-Harris]

Ref #797. Let's see how this goes...

• Export a class that extends HTMLElement
• Call customElement.define(tag, name)
• Expose props
• Guess props, if unspecified, based on data the template requires
• Render <slot> elements
• Render <style> elements, with untransformed CSS. (This part might get... interesting. Not 100% sure how shadow DOM scoping rules work)
• Ensure generated classes can be instantiated with new, both in user code and with nested components
• Figure out what the correct SSR behaviour is
• Handle initial attributes and setAttribute

Currently, the API I'm building around is this:

// if the component exports a `tag` string and (optionally) `props` array
compiled = svelte.compile(source, {
  customElement: true
});

// if the component doesn't export those things, or you want to override
compiled = svelte.compile(source, {
  customElement: {
    tag: 'my-custom-element',
    props: ['foo', 'bar']
  }
});

Might make sense to also have something like this:

compiled = svelte.compile(source, {
  name: 'NavBar', // build tools typically generate this from filename
  customElement: {
    tag: 'my-[auto]' // becomes 'my-nav-bar', etc
  }
});

Here's where I've got to so far:

[Rich-Harris]

I think this is in a reasonably good place — I wouldn't call it production ready, but I think the best thing to do is to merge it in and start playing with it to see where the bugs are.

:global(...) styles aren't currently handled, so there's some work to do there as a follow-up. And I don't really have a good SSR plan.

Feedback on the API etc welcome.

[robdodson]

wow this is cool!

If it's any help, I've been working on custom element best practices docs and did a talk on them at Polymer Summit. All of this material is geared toward vanilla custom elements to (hopefully) make it easier to build abstractions on top of them. Happy to try to answer any questions that come up as you're working through this :)

[Rich-Harris]

thanks @robdodson! will read this document carefully later — from skimming, it looks like there are some things we can enforce at compile time, some things we can warn on (e.g. :host { display: block } without respecting hidden etc), and other stuff that will have to be left to the component author. Very useful resource 👍