Introduction /
a. Basics b. Adding data c. Dynamic attributes d. Styling e. Nested components f. HTML tags g. Making an app a. Assignments b. Declarations c. Statements d. Updating arrays and objects a. Declaring props b. Default values c. Spread props a. If blocks b. Else blocks c. Else-if blocks d. Each blocks e. Keyed each blocks f. Await blocks a. DOM events b. Inline handlers c. Event modifiers d. Component events e. Event forwarding f. DOM event forwarding a. Text inputs b. Numeric inputs c. Checkbox inputs d. Group inputs e. Textarea inputs f. Select bindings g. Select multiple h. Contenteditable bindings i. Each block bindings j. Media elements k. Dimensions l. This m. Component bindings a. onMount b. onDestroy c. beforeUpdate and afterUpdate d. tick a. Writable stores b. Auto-subscriptions c. Readable stores d. Derived stores e. Custom stores f. Store bindings a. Tweened b. Spring a. The transition directive b. Adding parameters c. In and out d. Custom CSS transitions e. Custom JS transitions f. Transition events g. Local transitions h. Deferred transitions a. The animate directive a. The use directive b. Adding parameters a. The class directive b. Shorthand class directive a. Slots b. Slot fallbacks c. Named slots d. Checking for slot content e. Slot props a. setContext and getContext a. <svelte:self> b. <svelte:component> c. <svelte:window> d. <svelte:window> bindings e. <svelte:body> f. <svelte:head> g. <svelte:options> a. Sharing code b. Exports a. The @debug tag a. Congratulations!
It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them as though we were including elements.
Add a <script> tag that imports Nested.svelte...
< script>
import Nested from './Nested.svelte' ;
</ script> ...then add it to the markup:
< p> </ p> < Nested/> Notice that even though Nested.svelte has a <p> element, the styles from App.svelte don't leak in.
Also notice that the component name Nested is capitalised. This convention has been adopted to allow us to differentiate between user-defined components and regular HTML tags.
Show me