svelte

History

Simon H d083f8a3f2 feat: custom elements rework (#8457 ) 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 #3594, fixes #3128, fixes #4274, fixes #5486, fixes #3422, fixes #2969, helps with https://github.com/sveltejs/kit/issues/4502 - all components are compiled with injected styles (inlined through Javascript), fixes #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 #5989, fixes #8191 - the wrapper forwards `addEventListener` calls to `component.$on`, which allows to listen to custom events, fixes #3119, closes #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 #7638, fixes #5705 - adds a `shadowdom` option to control whether or not encapsulate the custom element. Closes #4330, closes #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. - 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		2 years ago
..
01-introduction	[docs] move `@html` tutorial to end (partly fixing #7253 ) (#7254 )	2 years ago
02-reactivity	[docs] fix typo (#8180 )	2 years ago
03-props	site: change "on to" to "onto" in tutorial 03 (#5386 )	4 years ago
04-logic	docs: add console output instruction to tutorial (#8336 )	2 years ago
05-events	[docs] absolute and future proof links (#7038 )	3 years ago
06-bindings	feat: `bind:innerText` for `contenteditable` (#4291 )	2 years ago
07-lifecycle	update api	3 years ago
08-stores	[docs] Rename a variable `count_value` to `countValue` in the `Stores` section (#7180 )	3 years ago
09-motion	[docs] fix inconsistent margin in svelte/motion spring tutorial (#8081 )	2 years ago
10-transitions	[docs] absolute and future proof links (#7038 )	3 years ago
11-animations	[docs] absolute and future proof links (#7038 )	3 years ago
12-actions	[docs] clear timeout on destroy	2 years ago
13-advanced-styling	[docs] style directive tutorial (#7161 )	3 years ago
14-composition	[docs] Typescript -> TypeScript (#7797 )	2 years ago
15-context	[docs] Use symbols for context keys in tutorial (#7046 )	3 years ago
16-special-elements	feat: custom elements rework (#8457 )	2 years ago
17-module-context	[docs] fix typo (#7344 )	3 years ago
18-special-tags	[docs] move `@html` tutorial to end (partly fixing #7253 ) (#7254 )	2 years ago
19-next-steps	[docs] create getting started guide outside blog (#7812 )	2 years ago