feat: custom elements rework

[dummdidumm]

This is an overhaul of custom elements in Svelte. Instead of compiling to a custom element class, the Svelte component class is mostly preserved as-is. Instead a wrapper is introduced which wraps a Svelte component constructor and returns a HTML element constructor. This has a couple of advantages:

• component can be used both as a custom element as well as a regular component. This allows creating one wrapper custom element and using regular Svelte components inside. Fixes Support custom element with nested components without errors #3594, fixes Nested Custom Element slots are never rendered #3128, fixes Nested child components lose their css when the parent is used as a custom element #4274, fixes svelte:component & custom element #5486, fixes Context API doesn't work for custom elements #3422, fixes :global(...) not working in custom elements #2969, helps with Cannot use custom element correctly with sveltekit kit#4502
• all components are compiled with injected styles (inlined through Javascript), fixes Nested child components lose their css when the parent is used as a custom element #4274
• the wrapper instantiates the component in connectedCallback and disconnects it in disconnectedCallback (but only after one tick, because this could be a element move). Mount/destroy works as expected inside, fixes Action lifecycle in custom elements #5989, fixes Custom elements are not "cleaned up" when the consuming application removes an element. #8191
• the wrapper forwards addEventListener calls to component.$on, which allows to listen to custom events, fixes Events are not emitted from components compiled to a custom element #3119, closes Custom element dispatch event #4142
• some things are hard to auto-configure, like attribute hyphen preferences or whether or not setting a property should reflect back to the attribute. This is why <svelte:options customElement={..}> can also take an object to modify such aspects. This option allows to specify whether setting a prop should be reflected back to the attribute (default false), what to use when converting the property to the attribute value and vice versa (through type, default String, or when export let prop = false then Boolean), and what the corresponding attribute for the property is (attribute, default lowercased prop name). These options are heavily inspired by lit: https://lit.dev/docs/components/properties. Closes feat: hyphenated attributes in custom elements #7638, fixes Two-Way Binding With Native Components Not In Sync With Attribute #5705
• adds a shadowdom option to control whether or not encapsulate the custom element. Closes issue #1748 - Custom elements light dom, open / closed #4330, closes Custom element without shadow DOM #1748

Breaking changes:

Wrapped Svelte component now stays as a regular Svelte component (invokeing it like before with new Component({ target: ..}) won't create a custom element). Its custom element constructor is now a static property named element on the class (Component.element) and should be regularly invoked through setting it in the html.

- const component = new Component({ target: someDiv, props: { foo: 'bar' } });
+ const component = document.createElement('custom-element-tag');
+ component.foo = 'bar';
+ someDiv.appendChild(component);
// or, if you have no attributes or only have simple string attributes:
+ someDiv.innerHTML = '<custom-element-tag foo="bar"></custom-element-tag>';

The timing of mount/destroy/update is different. Mount/destroy/updating a prop all happen after a tick, so shadowRoot.innerHTML won't immediately reflect the change (Lit does this too). If you rely on it, you need to await a promise for example:

const component = someDiv.innerHTML = '<custom-element-tag foo="bar"></custom-element-tag>';
+ await Promise.resolve();
someDiv.querySelector('custom-element-tag').shadowRoot.querySelector('div');
// ...

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with npm test and lint the project with npm run lint

[vercel]

@dummdidumm is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.

[tanhauhau]

maybe give specific explanation of why it failed, eg

'cePropsDefinition' must be a statically analyzable object literal of the form '{ prop: { attribute?: string; type?: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object', reflect?: boolean; } }', found key 'xxx'

'cePropsDefinition' must be a statically analyzable object literal of the form '{ prop: { attribute?: string; type?: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object', reflect?: boolean; } }', the value of reflect is not boolean